jQuery的动画方法

jQuery的动画方法

css：<style> .block { width: 100px; height: 100px; background: red; } </style>
html：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
    国庆结束！
</div>

jQuery固定动画
show(speed,easing,fn)：显示隐藏匹配元素
hide(speed,easing,fn)：隐藏显示的元素
toggle: show+hide 切换
相当于 display ：block \ none
fn是指动画执行完成

$( function(){
 	$("#btn").on("click", function () {
 			$(".block").toggle(1000,function (){
             console.log("显示隐藏");
             });
 	}
})

slideDown(speed,easing,fn)：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp(speed,easing,fn)：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideToggle(speed,easing,fn)：
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
fn：动画执行之后

$( function(){
 	$("#btn").on("click", function () {
 		$(".block").slideToggle(function (){
             console.log("动画完成");
             })	
 	}
})

fadeIn(speed,easing,fn)：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选择的触发一个回调函数。
fadeOut(speed,easing,fn)：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选择的触发一个回调函数。
fadeTo(speed,easing,fn)：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
fadeToggle(speed,easing,fn)：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
fn 动画执行完成

$( function(){
 	$("#btn").on("click", function () {
 		$(".block").fadeTo(1000,0.5,function (){
             console.log("动画完成");
             });
 	}
})

jQuery的自定义动画
animate(params,speed,easing,fn)：用于创建自定义动画的函数。
参数含义：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。

$( function(){
 	$("#btn").on("click", function () {
 		$(".block").animate({
                marginLeft: 800
            }, 1000, "linear").animate({
                marginTop: 200
            }, 1000, "linear").animate({
                marginLeft: 0
            }, 1000, "linear").animate({
                marginTop: 0
            }, 1000, "linear");
 	}
})

stop(clearQueue,jumpToEnd)：停止所有指定元素上正在运行的动画。
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

$( function(){
 	$("#btn").on("click", function () {
 		$(".block").animate({
                marginLeft: 800
            }, 1000, "linear").animate({
                marginTop: 200
            }, 1000, "linear").animate({
                marginLeft: 0
            }, 1000, "linear").animate({
                marginTop: 0
            }, 1000, "linear");
 	}
});
 $("#stop").click(function (){
            //$(".block").stop(true,true);
            $(".block").finish();
        });