js3基础

淡入淡出效果fadein,fadeout,

    <script>
        $(function(){
     

            var $bt = $('#bt1');
            var $d1 = $('#d1');
            $bt.click(function(){
     

               $d1.fadeIn(1000,'swing',alert('出现'));
            })
        })

    </script>
    <style>
        .list1{
     
            height: 100px;
            width: 100px;
            background-color: coral;
            display: none;
        }
    </style>
</head>
<body>

    <input type="button" id="bt1" value="点击">
    <div id="d1" class="list1"></div>

fadetoggle ,

多次执行就反复淡入淡出

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
     

            var $bt = $('#bt1');
            var $d1 = $('#d1');

            $bt.click(function(){
     

                $d1.fadeToggle(2000,'swing',alert('动画结束'));  // 1时间2形状3淡入淡出后执行的函数

            })

        })

    </script>


    <style>
        .list1{
     
            height: 100px;
            width: 100px;
            background-color: coral;
            display: none;
        }
    </style>

hide() ,show() ,toggle()

相当于修改 display: hidden; 和 display: show;
每次toggle 执行 就是对立面的显示和隐藏


    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
     

            var $bt = $('#bt1');
            var $d1 = $('#d1');
            $bt.click(function(){
     

               $d1.toggle();
            })
        })

    </script>
    <style>
        .list1{
     
            height: 100px;
            width: 100px;
            background-color: coral;
            display: none;
        }
    </style>
</head>
<body>

    <input type="button" id="bt1" value="点击">
    <div id="d1" class="list1"></div>

slidedown 、slidetoggle

也是淡入淡出

.siblings()

反向选择兄弟节点。

链式操作

一次 ,顺次执行多个操作。
标签对象.children().parent().siblings()

你可能感兴趣的:(js,js)