JQuery动画效果

1. 显示和隐藏

$(function() {

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

$("#box").show(1000, function showNext () {

$(this).next().show(1000, showNext);

});

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

$("#box").hide(1000, function hideNext() {

$(this).next().hide(1000, hideNext);

});

$("#box").toggle(1000);

});

2. 上下滚动

$("#box").slideUp(1000);

$("#box").slideDown(1000);

$("#box").slideToggle(1000);

3. 淡入淡出

$("#box").fadeIn(1000);

$("#box").fadeOut(1000);

$("#box").fadeToggle(1000);

$("#box").fadeTo(1000, 0.33);

4. 自定义动画

$(function () {

$("#box").animate({

top: "+=100px",

left: "300px",

width: "300px",

height: "400px",

fontiSzie: "50px"

opacity: 0.5

}, 2000, function () {

alert("completed");

});   //同步动画

})

$("#box").animate({width: "300px"}).animate({opactiy: 0.5});   //连缀方式实现列队动画，仅支持在相同元素上。

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

$(this).css("color", "orange");

next();    //下面还要执行动画。

}).hide("slow");

$("#box").slideUp("slow").slideDown("slow").queue(function () {

$(this).css("color", "orange");

$(this).dequeue();    //下面还要执行动画。

}).hide("slow");

console.log($("#box").queue("fx").length);  //列队动画长度

$("#box").clearQueue();  //清除动画

5. 停止动画

$("#stop").click(function () {

$("#box").stop();  //停止#box元素上的动画

})

$("#box").animate({left: "300px"}, 1000).animate({bottom: "300px"}, 1000).animate({with: "300px"}, 1000).animate({height: "300px"}, 1000);

$("#stop").click(function () {

$("#box").stop(true, true);  //第一个true停止后面的动画， 第二个true停止后跳到末态位置。

})

$("#box").animate({left: "300px"}, 1000).delay(2000).animate({bottom: "300px"}, 1000).animate({with: "300px"}, 1000).animate({height: "300px"}, 1000);

//delay 2秒钟后执行后面动画

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

$(":animated").css("color", "blue");   //查找正在运动的动画

})

6. 全局动画设置

$.interval = 5;   //调整帧间隔时间

$.off = true;  //关闭动画

$("#box").animate({left: "300px"}, 3000, "swing");  //缓动

 $("#box").animate({left: "300px"}, 3000, "linear");  //匀速