jQuery 动画
jQuery动画相关方法概况
方法 | 说明 | 实例 |
|---|---|---|
hide()和show() | 隐藏和显示 HTML 元素。 | $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); |
toggle() | 可以使用 toggle() 方法来切换 hide() 和 show() 方法。 | $("button").click(function(){ $("p").toggle(); }); |
fadeIn()和fadeOut() | 淡入和淡出可见元素。 | $("button").click(function(){ $("#div").fadeOut(3000); $("#div").fadeIn(3000); }); |
fadeToggle() | 可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。 | $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); |
fadeTo() | fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 | $("button").click(function(){ $("#div1").fadeTo("slow",0.15); }); |
slideUp()和slideDown() | 向上和向下滑动元素。 | $("#flip").click(function(){ $("#panel").slideUp(1000); $("#panel").slideDown(1000); }); |
slideToggle() | 可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。 | $("#flip").click(function(){ $("#pane").slideToggle(); }); |
animate() | animate() 方法允许您创建自定义的动画。 | $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'+=150px', width:'-=150px' }); }); |
stop() | stop() 方法用于在动画或效果完成前对它们进行停止。 | $("#stop").click(function(){ $("#panel").stop(); }); |
显示/隐藏
（1）hide() 和 show()
在 jQuery 中，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback); 注意：以下的speed和callback参数说明对于本文介绍的其他方法均适用。所以下文不再赘述。
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 、"normal"或毫秒数。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
范例代码
如下代码的作用是：点击按钮后，触发<p>元素的隐藏动作，速度为1000毫秒，动作结束后，弹出“已经隐藏”提示。
$("button").click(function(){
$("p").hide(1000, function(){
alert("已经隐藏");
});
});（2）toggle() 在jQuery中，可以使用 toggle() 方法来切换 hide() 和 show() 方法。
语法
$(selector).toggle(speed,callback);参数说明可以参考 hide() 和 show()。
淡入 / 淡出
（1）fadeIn() 和 fadeOut()
在 jQuery 中，可以使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素。
语法
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);参数说明可以参考 hide() 和 show()。
（2）fadeToggle()
在jQuery中，可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。
语法
$(selector).fadeToggle(speed,callback);参数说明可以参考 hide() 和 show()。
（3）fadeTo()
在jQuery中，fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法
$(selector).fadeTo(speed,opacity,callback);fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
其余参数说明可以参考 hide() 和 show()。
滑动
（1）slideUp() 和 slideDown()
在 jQuery 中，可以使用 slideUp() 和 slideDown() 方法来向上滑动、向下滑动元素。
语法
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);参数说明可以参考 hide() 和 show()。
（2）slideToggle()
在 jQuery 中，可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。
语法
$(selector).slideToggle(speed,callback);参数说明可以参考 hide() 和 show()。
动画
animate()
在jQuery中，animate() 方法允许创建自定义的动画。
语法
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
其余参数说明可以参考 hide() 和 show()。
范例代码
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});停止动画
stop()
在jQuery中，stop() 方法用于在动画或效果完成前对它们进行停止。
语法
$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。