动画效果


1、显示和隐藏
显示的方法show (),隐藏的方法为hide()

 

<input
type="button"class="show"
value="显示">

<input
type="button"class="hide"
value="隐藏">

<div
style="height:200px;width:200px;background:red"

id="box"
>div</div>

 

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

  
$('div').show(1000);});

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

  
$('div').hide(1000);});

//show(),hide()中的参数1000表示速度，还可以用预设速度slow，normal，fast来表示，分别对应200ms，400ms，600ms

Eg：show（‘slow‘）

默认为400ms

还有一个参数为回调函数

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

     
$('div').show('slow',function(){

       
alert('over');

     
});

  
  });

 

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

     
$('div').hide('slow',function(){

       
alert('over');

     
});

列队动画

<input
type="button"class="show"
value="显示">

<input
type="button"class="hide"
value="隐藏"
>

<divstyle="background:red;float:left;padding:5px;margin-right:10px" 
id="box"
>你</div>

<divstyle="background:red;float:left;padding:5px;margin-right:10px" 
id="box"
>好</div>

<divstyle="background:red;float:left;padding:5px;margin-right:10px" 
id="box"
>吗</div>

<divstyle="background:red;float:left;padding:5px;margin-right:10px" 
id="box"
>？</div>

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

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

  
});

 

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

     
$('div').hide('slow');

  
});

//显示的是同步动画

若要求显示列队动画，即逐个显示出来，代码如下

显示

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

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

       
$('div').eq(1).show('slow',function(){

          
$('div').eq(2).show('slow',function(){

             
$('div').eq(3).show('slow');

          
});

       
});

     
});

隐藏

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

     
$('div').eq(0).hide('slow',function(){

       
$('div').eq(1).hide('slow',function(){

          
$('div').eq(2).hide('slow',function(){

             
$('div').eq(3).hide('slow');

          
});

       
});

     
});

由于上述方法繁琐复杂，嵌套多，以下提供了简便的方法

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

     
$('.box').first().show('slow',function
tShow(){

       
$(this).next().show('slow',tShow);

     
});

  
});

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

     
$('.box').first().hide('slow',function
tHide(){

       
$(this).next().hide('slow',tHide);});

     
});

//利用函数的递归调用，逐个显示出来

toggle()
即可以切换也可以隐藏

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

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

  
});

//在隐藏和显示之间来回切换

滑动、卷动

向上滑动：$('.up').click(function(){

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

向下滑动：$('.down').click(function(){

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

  
});

切换：  
$('.toggle').click(function(){

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

淡入淡出

淡入：$('.in').click(function(){

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

淡出：$('.out').click(function(){

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

切换：$('.toggle').click(function(){

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

透明度到：$('.to').click(function(){

  
$('.box').fadeTo('slow',0.3333);});

自定义动画animate()

animate()必须传递是参数为css键值对，可选参数为速度和回调函数

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

     
$('.box').animate({

       
height:'100px',

       
width:'100px',

       
opacity:0.5,

       
fontSize:'50px'

     
},2000,function(){alert("over");});

移动位置

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

     
$('.box').animate({

       
height:'100px',

       
width:'100px',

       
opacity:'0.5',

       
fontSize:'50px',

       
left:'300px',

     
  
top:'300px'},3000);
});

//利用css位置来移动、

 

jQuery提供了累加累减的功能，移动到某位置后，继续从该位置移动

 

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

     
$('.box').animate({

       
left:'+=100px'});});

实现列队动画有两种方式：1、通过回调函数
2、通过连缀的方式

函数回调方式：

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

     
$('.box').animate({

       
height:'100px'

     
},function(){

       
$('.box').animate({

          
width:'100px'

       
},function(){

          
$('.box').animate({

             
fontSize:'50px'});

       
});

     
});

  
});

  
连缀方式：（对同一个元素操作的情况下）$('.box').animate({height:'100px'}).animate({width:'100px'}).animate({fontSize:'50px'});

不是同一个元素时，连缀方式不能实现列队动画，要使用嵌套回调函数才能实现列队动画，但是回调函数复杂，语义不清楚

列队动画方法

jQuery提供了类似于回调函数的方法queue()

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

  
$('.box').slideUp('slow').slideDown('slow').queue(function(next){

       
next();

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

     
});

  
});

//传递了一个参数，next，告诉后面还要执行动作

 

 

queue()可以得到当前动画队列长度

$('.box').queue('fx').length;

清理列队方法

$(this).clearQueue();

动画相关方法

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

     
$('.box').stop();});

  

但是列队动画时，只会停止第一个列队动画效果，之后后面的效果继续执行

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

  
$('.box').animate({left:'300px'},2000).animate({bottom:'300px'},2000).animate({height:'300px'},1000).animate({width:'300px'},1000);

  
});

  

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

     
$('.box').stop();

  
});

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

     
$('.box').stop(true);
});//如果stop()中的参数为true，表示停止并且清除后面的列队动画，即动画完全停止，默认值为false

stop(true,true),第二个参数为true，停止后会跳到末尾的位置上，默认值为false

时间延迟delay()

$('.box').animate({left:'300px'}).delay(1000).animate({bottom:'300px'}).delay(1000).animate({height:'300px'}).animate({width:'300px'});

过滤器

判断当前哪一个动画正在运动

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

     
$('.box1').slideToggle('slow',function(){

       
$(this).slideToggle('slow',arguments.callee);

     
});

     
});

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

     
$(':animated').stop().css('background','blue');

  
});

//查看当前运动的div，并停止运动，将其变蓝色

动画全局属性

interval：表示运行的帧数，默认值为13，数字越小越流畅

$.fx.interval=200

off：关闭动画

$.fx.off=true;

animate()还有一个参数：swing（缓动），liner（匀速），默认为swing

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

     
$('.box').animate({

       
left:’300px’},’liner’);});