jQuery(十)--动画:show/hide/toggle、slideDown/slideUp/slideToggle、

wuchangjian2021-11-09 19:26:09编程学习

 

公共部分:

<script src="js/jquery-1.8.3.js"></script>

 一、show()/hide()/toggle()

都可接收两个参数,第一个参数表示执行所需的时间单位为毫秒;第二个参数表示执行完毕之后的回调函数

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: orange;
            display: none;
        }
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
        $(function() {
            //显示
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //隐藏
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //切换
            $("button").eq(2).click(function() {
                $("div").toggle(1000, function() {
                    //动画执行完毕之后调用
                });
            });
        });

 


二、slideDown()/slideUp()/slideToggle()

都可接收两个参数,第一个参数表示执行所需的时间单位为毫秒;第二个参数表示执行完毕之后的回调函数

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: orange;
            display: none;
        }
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
        $(function() {
            //显示
            $("button").eq(0).click(function() {
                $("div").slideDown(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //隐藏
            $("button").eq(1).click(function() {
                $("div").slideUp(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //切换
            $("button").eq(2).click(function() {
                $("div").slideToggle(1000, function() {
                    //动画执行完毕之后调用
                });
            });
        });

 


三、

相关文章

干货:SSH的使用详解

干货:SSH的使用详解

今天为大家分享一篇关于SSH 的介绍和使用方法的文章。本文从SSH是什么出发࿰...

测试面试题

(朋友整理的) 面经:面试会问大致方向一&#...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。