详解jQuery中基本的动画方法

大致介绍

通过jQuery中基本的动画方法，能够轻松地为网页添加非常精彩的视觉效果，给用户一种全新的体验

jQuery中的动画

show()和hide()方法

1、show()方法和hide()方法是jQuery中最基本的方法，hide()方法会将一个元素的display设置为”none”；

2、show()方法和hide()方法会同时改变元素的宽度、高度和透明度

3、在一个元素使用hide()方法时会记录原先的display属性，当调用show()方法的时候会根据hide()方法记住的display属性值来显示该元素

4、show()方法和hide()方法都能接受一个参数，表示运动的快慢

$('.div1').toggle(function(){
$('.div2').hide(600);
 },function(){
  $('.div2').show(600);
 });

fadeIn()方法和fadeOut()方法

1、fadeOut()方法在指定的一段时间内只降低元素的不透明度，而fadeIn()方法则相反

2、接受一个参数

 $('.div1').toggle(function(){
  $('.div2').fadeIn(600);
 },function(){
  $('.div2').fadeOut(600);
 });

slideUp()方法和slideDown()方法

　1、slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为”none”，当调用slideDown()方法时，这个元素将由上至下延伸，slideUp()方法相反

　2、接受一个参数

 $('.div1').toggle(function(){
  $(this).next().slideUp();
 },function(){
  $(this).next().slideDown();
 });

自定义动画方法animate()

　语法：animate(params,speed,callback);

　(1)params:一个包含样式属性及值得映射

　(2)speed:速度参数，可选

　(3)callback:在动画完成时执行的函数，可选

1、基本用法

 $('.div1').click(function(){
  $('.div2').animate({width:'+=50px',height:'300px'},600);
 });

2、多重动画

如果要采用链式运动可以采用链式写法

 $('.div1').click(function(){
 $('.div2').animate({width:'350px'},600)
  .animate({height:'300px'},600);
 });

注意：如果采用链式写法时用了css()方法，css()方法不会添加到运动队列中，会直接执行而不等待前面的动画

 $('.div1').click(function(){
  $('.div2').animate({width:'350px'},600)
   .animate({height:'300px'},600)
   .css('border','10px solid black');
 });								 
 1/2    1 2 下一页 尾页