jQuery 动画

基础

.hide([duration ] [,easing ] [,complete ])

用于隐藏元素，没有参数的时候等同于直接设置display属性

.css('display', 'none')

duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数

看几个例子

 $('.target').hide()；

 $('#book').hide(300, function() {
alert('Animation complete.');

});

  $('#book').hide(300, 'linear', function() {
    alert('Animation complete.');
  });

.show( [duration ] [, easing ] [, complete ] )

用于显示元素，用法和hide类似

.toggle( [duration ] [, easing ] [, complete ] )

事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置

用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

渐变

.fadeIn( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素，参数含义和上面相同

$('#book').fadeIn('slow', function() {
// Animation complete

});

.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

$('#book').fadeOut('slow', function() {
// Animation complete.

});

.fadeTo( duration, opacity [, easing ] [, complete ] )

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

$('#book').fadeTo('slow', 0.5, function() {
  // Animation complete.
});

.fadeToggle( [duration ] [, easing ] [, complete ] )

通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});

滑动

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$('#book').slideDown('slow', function() {
    // Animation complete.
});

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。

$('#book').slideUp('slow', function() {
    // Animation complete.
});

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {
 // Animation complete.
 });
});

自定义

上面几个简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

.animate( properties, options )

options是一组包含动画选项的值的集合。常用的选项:

duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
complete：在动画完成时执行的函数

$('li').animate({ opacity: .5, height: '50%' }, { step: function(now, fx) {
```
 var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
 $('body').append('<div>' + data + '</div>');
```
} });

高级用法

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

.stop( [clearQueue ] [, jumpToEnd ] )

停止匹配元素当前正在运行的动画。

当一个元素调用.stop()，当前正在运行的动画（如果有的话）立即停止。如果，例如，一个元素用.slideUp()隐藏的时候，调用.stop()，该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成，所以动画完成时执行的回调函数是不会被调用的。

如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。

如果提供jumpToEnd参数，并且值为true时，当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。用上面的.slideUp()为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});




    <button id="btn14">变宽</button>
    <button id="btn15">复原</button>
    <button id="btn16">变宽变大移动</button>
    <button id="btn17">多个动画</button>
    <button id="btn18"></button>

    <div class="div3" style="width:80px;height:80px;background-color:red;position:relative;"></div>

  <script type="text/javascript">
    $(function(){
        var $div3 = $(".div3");
        $("#btn14").on('click', function(e){
            $div3.animate({width: '200px'});
        });
        $("#btn15").on('click', function(){
            $div3.animate({
                width:'80px',
                height: '80px',
                left: '0px',
                top: '0px',
                opacity: 1
            }, 500);
        });
        $("#btn16").on('click', function(){
            $div3.animate({
                width:'150px',
                height: '150px',
                left: '100px',
                top: '100px',
                opacity: 0
            }, 500, function(){

            });
        });

        var clickable = true;
        $("#btn17").on('click', function(){
            // if(!clickable){
            //   return;
            // }
            //clickable = false;
            //$div3.finish()
            $div3.stop(true, true);
            $div3.css({width: 80, height: 80, left: 0, top: 0});
            $div3.stop(true, true);
            $div3.animate({width:'150',height:'150px'}).animate({left:'200px'})
                 .animate({top:'200px'});

            $div3.animate({left:'0px'});
            $div3.animate({top:'0px'});
            $div3.animate({width:'80px',height:'80px'}, function(){
              clickable = true;
            });
        });

    });
    </script>

参考

jQuery 中文API

动画