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() 方法。
语法
参数说明可以参考 hide() 和 show()。
(3)fadeTo()
在jQuery中,fadeTo()方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
其余参数说明可以参考 hide() 和 show()。
滑动
(1)slideUp() 和 slideDown()
在 jQuery 中,可以使用 slideUp() 和 slideDown() 方法来向上滑动、向下滑动元素。
语法
参数说明可以参考 hide() 和 show()。
(2)slideToggle()
在 jQuery 中,可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。
语法
参数说明可以参考 hide() 和 show()。
动画
animate()
在jQuery中,animate() 方法允许创建自定义的动画。
语法
必需的 params 参数定义形成动画的 CSS 属性。
其余参数说明可以参考 hide() 和 show()。
范例代码
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
停止动画
stop()
在jQuery中,stop() 方法用于在动画或效果完成前对它们进行停止。
语法
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
本文转自静默虚空博客园博客,原文链接:http://www.cnblogs.com/jingmoxukong/p/4178044.html,如需转载请自行联系原作者