jquery动画

显示与隐藏

显示：

//显示用法一：show();  无参数
//效果：立即显示
$("div").show();

//显示用法二：show(毫秒值);（底层是由display控制）
//效果：控制宽、高、透明度由小变大
$("div").show(2000);

//显示用法三：hide(字符串);
// slow慢：600ms   normal正常:400ms   fast快：200ms
//效果：同用法二
$("div").hide("slow");
$("div").hide("fast");
$("div").hide("normal");

//显示用法四：show(毫秒值，回调函数[显示完毕执行什么]);
//效果：前面同法二，执行完动画后执行回调函数
$("div").show(5000,function () {
    alert("动画执行完毕！");
});

隐藏：

jq对象.hide();

用法同show()有四种，效果分别与之对应的show方法相反

---

滑入、滑出、滑动切换

滑入：
同show方法一样有四种方法且参数一致，通过控制宽度或者高度来实现效果，滑入的方向与定位有关，默认向下滑入

//方法一：slideDown();
//效果：匀速向下滑
$("div").slideDown();

//方法二：slideDown(毫秒值);
//效果：缓动向下滑
$("div").slideDown(2000);

//方法三、四略

滑出：

jq对象.slideUp();

同滑入

滑入、滑动切换

//slideToggle()  用法同上
//效果：如果是滑入就滑出，反之一样
$("div").slideToggle(1000);

---

淡入、淡出、淡入淡出切换、改变透明度

淡入：
用法同上，通过控制opacity达到效果

//方法一：slidefadeIn();
//效果：透明度匀速增加
$("div").fadeIn();

//方法二：fadeIn(毫秒值);
//效果：透明度缓动向下滑
$("div").fadeIn(2000);

//方法三、四略

淡出：

jq对象.fadeOut();

淡入淡出切换：

fadeToggle();

效果同滑入滑出切换

---

自定义动画

$(selector).animate(params,[speed],[easing],[fn])
参数:
params:动画目标值，json格式
speed:动画速度
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次

$("div").animate({"top":100,"left":100},1000, function () {
    $("div").animate({"top":50,"left":50},1000, function () {
        alert("动画执行完毕！");
    });
});

---

动画停止

$(selector).stop([clearQueue],[jumpToEnd])
参数说明:
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

$("div").stop(true,true);