jQuery动画效果详解-优快云博客

淡入淡出效果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>