jQuery笔记--动画篇

常用动画操作笔记，供今后学习使用。

隐藏显示

隐藏

.hide("fast / slow/n")

‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏
‘n’表示时间

显示

.show(3000)

隐藏/显示

.toggle(3000)

显示则隐藏，隐藏则显示

$('elem').hide("slow").show(3000)
$('elem').toggle(3000)

上卷下拉

下拉动画

.slideDown( [duration ] [, complete ] )

上卷动画

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

上卷下拉切换

slideToggle(fast/slow/n)

//下拉
$("ele").slideDown(1000, function() {
    //等待动画执行1秒后,执行别的动作....
});
//上卷
$("#a2").slideUp(3000,function(){
    //等待动画执行3秒后,执行别的动作....
})

淡入淡出

淡出

.fadeOut( [duration ], [ complete ] )

淡入

.fadeIn( [duration ], [ complete ] )

淡入淡出切换

.fadeToggle( [duration ] ,[ complete ] )

改变透明度

.fadeTo( duration, opacity ,callback)

opacity为透明度 0~1

animate

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

.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了.

border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果.

options参数
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调

$('#elem').animate({
    left: 50,
    width: '50px'
    opacity: 'show',
    fontSize: "10em",
}, 500);


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

停止动画

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

.stop(); 停止当前动画，点击在暂停处继续开始
.stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

stop()：只会停止第一个动画，第二个第三个继续
stop(true)：停止第一个、第二个和第三个动画
stop(true ture)：停止动画，直接跳到第一个动画的最终状态