动画效果



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');

   });

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

1. 滑动、卷动

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

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

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

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

   });

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

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

1. 淡入淡出

淡入：$('.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);});

1. 自定义动画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'});

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

1. 列队动画方法

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();

1. 动画相关方法

   $('.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，并停止运动，将其变蓝色

1. 动画全局属性

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

   $.fx.interval=200

off：关闭动画

$.fx.off=true;

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

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

      $('.box').animate({

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