jQuery 动画效果代码分享

$('.show').click(function(){ //设置个触发事件  
  $('#box').show();     //显示 
});
$('.hide').click(function(){  //设置个触发事件  
  $('#box').hide();     //隐藏
});

$('.show').click(function(){ 
  $('#box').show(1000);    //显示用了 1 秒 
}); $('.hide').click(function(){ 
  $('#box').hide(1000);    //隐藏用了 1 秒 
});

$('#box').show('slow');   //600 毫秒 
$('#box').show('normal');  //400 毫秒 
$('#box').show('fast');   //200 毫秒 

$('.show').click(function(){
  $('#box').show('slow',function showspan(){
    $(this).next().show('slow',showspan);
  });
})

$('.show').click(function(){
  $('#box').show('slow',function(){
    $(this).next().show('slow',arguments.callee);
  });
})

$('.toggle').click(function(){
  $(this).toggle('slow'); 
});

$('.down').click(function(){  //向下滑动
  $('#box').slideDown(); 
});
$('.up').click(function(){   //向上滑动
   $('#box').slideUp(); 
});
$('.toggle').click(function(){  //切换
  $('#box').slideToggle(); 
});

$('.in').click(function(){    //淡入
  $('#box').fadeIn('slow');  
});
$('.out').click(function(){    //淡出
  $('#box').fadeOut('slow'); 
});
$('.toggle').click(function(){  //切换
  $('#box').fadeToggle(); 
});

$('.toggle').click(function(){ 
  $('#box').fadeTo('slow',0.33);   //0.33 表示值为 33%
});

$('.animate').click(function(){ 
  $('#box').animate({ 
    'width':'300px', 
    'fontSize':'50px', 
    'opacity':0.5 
  }); 
});

$('.animate').click(function(){
  $('#box').animate({
    'width':'500px',
    'height':'400px',
  },2000,function(){
    alert('执行完毕')；
  })；
})；

$('.animate').click(function(){ 
  $('#box').animate({ 
    'top':'300px',   //先必须设置 CSS 绝对定位 
    'left':'200px' 
  }); 
});

$('.animate').click(function(){ 
    $('#box').animate({ 
      left:'+=100px',
      width:'+=100px',
      height:'+=100px'
  }); 
});

//使用回调函数，强行将.css()方法排队到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow',function({
  $(this).css('background','orange');              
});

//使用.queue()方法模拟动画方法跟随动画方法之后
$('#box').slideUp('slow').slideDown('slow').queue(function(){
  $(this).css('background','orange');
 });

//使用 next 参数来实现继续调用列队动画 $('#box').slideUp('slow').slideDown('slow').queue(function(next{
  $(this).css('background','orange'); 
  next(); 
}).hide('slow');

//清理动画列队 
$('#box').slideDown('slow',function(){
  $(this).clearQueue()
});

$('.animate').click(function(){ 
  $('#box').animate({ 
    'left':'300px' },1000); 
  $('#box').animate({
    'top':'300px' },1000);
  $('#box').animate({
    'width':'300px' },1000);
  $('#box').animate({ 
    'height':'300px' },1000);
});
  $('.stop').click(function(){
    $('#box').stop(true,false); 
  });

//开始延迟 1 秒钟，中间延迟 1 秒 
$('.animate').click(function(){
  $('#box').delay(1000).animate({ 
    'left':'300px' },1000); 
  $('#box').animate({ 
    'bottom':'300px' },1000); 
  $('#box').delay(1000).animate({
    'width':'300px' },1000); 
  $('#box').animate({
    'height':'300px' },1000);
  });

//递归执行自我，无限循环执行
$('#box').slideToggle('slow',function(){
  $(this).slideToggle('slow',arguments.callee); 
});