jQuery学习之基本效果
1> show() 显示隐藏的匹配元素
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
示例
//显示所有段落 HTML 代码: <p style="display: none" mce_style="display: none">Hello</p> jQuery 代码: $("p").show()
2> hide() 隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。
示例
//隐藏所有段落 jQuery 代码: $("p").hide()
3> hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。
参数
speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (Function) : (可选) 在动画完成时执行的函数,每个元素执行一次。
示例
4> toggle() 切换元素的可见状态
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
示例
//切换所有段落的可见状态。 HTML 代码: <p>Hello</p><p style="display: none" mce_style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle="display: none">Hello</p><p style="display: block" mce_style="display: block">Hello Again</p>
5> toggle( switch ) 根据switch参数切换元素的可见状态(ture为可见,false为隐藏)
如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。
示例
//切换所有段落的可见状态。 HTML 代码: <p>Hello</p><p style="display: none" mce_style="display: none">Hello Again</p> jQuery 代码: var flip = 0; $("button").click(function () { $("p").toggle( flip++ % 2 == 0 ); }); 结果: <p tyle="display: none">Hello</p><p style="display: block" mce_style="display: block">Hello Again</p>
6> toggle(speed,[callback]) 以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。
参数
speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (Function) : (可选) 在动画完成时执行的函数,每个元素执行一次。
示例
//用600毫秒的时间将段落缓慢的切换显示状态 jQuery 代码: $("p").toggle("slow"); 用200毫秒将段落迅速切换显示状态,之后弹出一个对话框。 jQuery 代码: $("p").toggle("fast",function(){ alert("Animation Done."); });
作者:Crazy Ma
出处:http://www.cnblogs.com/intcry
♪:30%的技术+70%的精神,帮助别人得到他想要的,你就能得到你想要的! ♪