jquery动画

1、显示，隐藏

显示方法：show();

隐藏方法：hide();

display:inline;

display:block;

display:none;

//同步动画,四个区块同时显示出来

$(.show).click(function(){

 $('.test').show('slow');

});

//列队动画

$(.show).click(function(){

 $('.test').eq(0).show('slow',function(){

   $('.test').eq(1).show('fast',function(){

    $('.test').eq(3).show('fast');

});

});

//列队动画，递归自调用

$(.show).click(function(){

   $('.test').first().show('fast',function testShow(){

   $(this).next().show('fast',testShow);

});

});

$(.hide).click(function(){

   $('.test').last().hide('fast',function testShow(){

   $(this).prev().hide('fast',testShow);

});

});

//切换

$(.toggle).click(function(){

 $('#box').toggle('slow');

});

//上下滑动

$('.up').click(function(){

  $('#box').slideUp('slow');

});

$('.down').click(function(){

  $('#box').slideDown('slow');

});

$('.toggle').click(function(){

  $('#box').slideToggle('slow');

});

//淡入淡出

$('.out').click(function(){

  $('#box').fadeOut('slow');

});

$('.in').click(function(){

  $('#box').fadeIn('slow');

});

$('.toggle').click(function(){

  $('#box').fadeToggle('slow');

});

// 自定义动画

$(function(){

$('.button').click(function(){

   $('#box').animate({

    width:'300px',

   height:'200px',

   opacity:0.5,   //透明度取值

   fontSize:'50px'

      },2000,function(){

   alert('动画执行完毕');

     });

   });

//运动方向

$('button').click(function(){

  $('#box').animate({

  left:'300px',

  top:'200px'

},'slow');

});

//运动方向累加

$('button').click(function(){

  $('#box').animate({

 left:'+=100px'

},'slow');

});

//回调函数+列队动画

$('button').click(function(){

  $('#box').animate({

    width:'300px'

},function(){

     $('#box').animate({

    height:'200px'

}, function(){

     $('#box').animate({

    opacity:0.5

}, function(){

     $('#box').animate({

    fontSize:'50px'

                });

           });

     });

 });

 });

//使用在同一个元素的基础上，使用连缀或顺序排列调用，可以实现列队动画

$('button').click(function(){

  $('#box').animate({width:'300px'})

                  .animate({height:'200px'})

                  .animate({opacity:0.5})

                  .animate({fontSize:'50px'});

});

//css不是动画方法，会默认排列到和第一个动画方法同步

$('.button').click(function(){

    $('#box').slideUp('slow').slideDown('slow',function(){

    $(this).css('background','orange');

});

});

//next

$('.button').click(function(){

    $('#box')

     .slideUp('slow')

     .slideDown('slow',function(){

     .queue(function(next){

      $(this).css('background','orange');

     next();

});

.hide('slow');

});

//dequeue

$('.button').click(function(){

    $('#box')

     .slideUp('slow')

     .slideDown('slow',function(){

     .queue(function(next){

      $(this).css('background','orange');

       $(this).dequeue();

});

.hide('slow');

});

});