jQuery 学习笔记之七 (jQuery 动画)

jQuery中的动画 
一  show() 和hide()方法
show()方法和hide()方法是jQuery中最基本的动画方。
调用hide 会将元素的display样式改为"none"
element.css("display","none"); //通过css方法隐藏元素。
调用show()方法将元素的dispaly样式设置为先前的显示状态("block","inline"或其他除了"none"之外的值)。
$("element").show();

show()方法指定一个速度参数，可以指定一个速度关键字 slow  $("element").show("slow");
元素将在600 毫秒内慢慢地显示出来。还有normal fast 分区是400毫秒 200 毫秒 
还可以在显示速度中指定一个数字，单位是毫秒。

二 fadeIn 方法和fadeOut
  与show()方法不同的是，fadeIn()方法fadeOut()方法只能改变元素的不透明度，fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")
  fadeIn()方法则相反。
  
  $("#panel h5.head").toggle(function(){ 
      $(this).next("div.content").fadeOut();
  },function(){ 
      $(this).next("div.content").fadeIn();
 });

 单击链接后内容慢慢的消失了，再次点击慢慢的显示出来。

 
三 slideUp()方法和slideDown()方法
   lsideUp()方法和slideDown()方法只会改变元素的高度，如果一个元素的display 属性值为"none",当调用slideDown()方法时，这个元素由上至下延伸显示，
   slideUp()方法正好相反，元素将由下到上缩短隐藏，使用slideUp() 方法和slideDown()方法再次对"内容"的显示和隐藏方式进行改变。
    
   $("#panel he.head").toggle(function(){  
   $(this).next("div.content").slideUp();
  
   },function(){ 
     $(this).next("div.content").slideDown();
   });


四 自定义动画方法animate()
   animate语法
   animate(params,speed,callback);
   (1)params  以个包含样式属性的映射，比如{property1:"value1","property2":value2}
   (2)speed ,速度参数，可选
   (3)callback，在动画完成时执行的函数，可选

 为了使这个元素动起来，要更改元素的"left"样式属性，为了影响该元素的top left bottom  right 样式属性，必须先把元素的position 样式设置为relative 或者absolute 

  $(function(){ 
   $("#panel").click(function() { 
       $(this).animate({left:"500px"},3000)
    })
 })
  首先为id 为"panel"的元素创建一个单机事件，然后对元素加入animate()方法，使元素在3秒(3000毫秒)内，向右移动500像素

  2.累加，累减动画 
  如果在500px之前加上"+="或者"-="符号即表示在当前位置累加或者累减。
  $(function() { 
   $("#panel")  .click(function() { 

        $(this).animate({left:"+=500px"},300);
     })
})
  
  3.多重动画
    同时执行多个动画，在元素向右滑动的同时，放大元素的高度，
    $(function(){ 
       $("#myImg").click(function(){  
        $(this).animate({left:"500px",height:"200px"},3000);
     })
   })
  运行代码后，<div>元素在向右滑动的同时，也会放大高度。
  按顺序执行多个动画
  只需把代码拆开，然后按照顺序写就可以了
  $(this).animate({left:"500px"},3000);
  $(this).animate({height:"200px"},3000);
  也可以改为链式的写法