当前位置：首页 > article >正文

jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)

article 2025/8/26 5:29:19

1、show()与hide()

show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])

参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

  <body><h3>show()和hide()方法动画方式显示和隐藏元素</h3><div><h4>我喜欢吃的水果</h4><ul><li>苹果</li><li>甘桔</li><li>梨</li></ul><input id="hidval" type="hidden" value="0"/></div><script type="text/javascript">$(function () {$("h4").bind("click", function () {if ($("#hidval").val() == 0) {$("ul").show(3000,function(){   //元素渐渐显现$("#hidval").val(1);})} else {$("ul").hide("slow",function(){$("#hidval").val(0);})}})});</script></body>

2、toggle()方法可实现与show和hide同样的功能

调用toggle()方法的调用格式是：

$(selector).toggle(speed,[callback])

实现上面1中隐藏与显示效果

 <script type="text/javascript">$(function () {var $spn = $("#spnTip");$("h4").bind("click", function () {$("ul").toggle(3000,function(){$spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");   //实现1中下拉框显示与隐藏效果，显示后再次点击隐藏效果是自动的，不需要额外代码})});});</script>

3、slideUp()和slideDown()方法在页面中滑动元素

前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：

$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])

slideDown()仅适用于被隐藏的元素；slideup()则相反。

<body><h3>使用slideUp()和slideDown()方法的滑动效果</h3><div><h4>我喜欢吃的水果</h4><ul><li>苹果</li><li>甘桔</li><li>梨</li></ul><input id="hidval" type="hidden" value="0"/></div><script type="text/javascript">$(function () {$("h4").bind("click", function () {if ($("#hidval").val() == 0) {$("ul").slideUp(3000,function(){$("#hidval").val(1);})} else {$("ul").slideDown(3000,function(){$("#hidval").val(0);})}})});</script></body>

4、slideToggle()方法可以切换slideUp()和slideDown()

调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：

$(selector).slideToggle(speed,[callback])

<body><h3>使用slideToggle()方法切换滑动效果</h3><div><h4><span class="fl">我喜欢吃的水果</span><span class="fr" id="spnTip">向下滑</span></h4><ul><li>苹果</li><li>甘桔</li><li>梨</li></ul><input id="hidval" type="hidden" value="0"/></div><script type="text/javascript">$(function () {var $spn = $("#spnTip");$("h4").bind("click", function () {$("ul").slideToggle(3000,function(){$spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");})})});</script></body>

5、fadeIn和fadeOut实现淡入淡出效果

fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为：

$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])