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

最新推荐文章于 2024-08-30 10:25:23 发布

叶炀

最新推荐文章于 2024-08-30 10:25:23 发布

阅读量5.7k

点赞数 5

分类专栏：学习记录-jQuery 文章标签： jQuery 动画效果

本文链接：https://blog.csdn.net/yeyang123_fy/article/details/47129545

版权

学习记录-jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中的动画效果方法，包括show()与hide()用于显示和隐藏元素，toggle()实现元素的切换显示，slideUp()和slideDown()实现元素的滑动效果，slideToggle()用于切换滑动方向，以及fadeIn和fadeOut实现元素的淡入淡出效果。

摘要由CSDN通过智能技术生成

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])