05jquery的eq的使用，以及slideDown,slideUp,slideToggle简单动画切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            bottom: 0;
            display:none;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <button>滑动两次</button>
    <br>
    
    <img src="1.jpeg"></img>
    <script src="./jquery-1.12.1.min.js"></script>
    <script>
        // 点击显示按钮 图片显示
        $('button:eq(0)').on('click',function(){
            $('img').slideDown(1000);
        })

        // 点击隐藏按钮 图片隐藏
       $('button:eq(1)').on('click',function(){
        $('img').slideUp(1000);
       })

        // 点击切换按钮 图片切换
       $('button:eq(2)').on('click',function(){
        $('img').slideToggle(1000);
       })
       
        
        $("button:eq(3)").click(function() {
           $('img').slideUp(1000).slideDown(1000);
        });
    </script>
</body>
</html>

05jquery的eq的使用，以及slideDown,slideUp,slideToggle简单动画切换效果

推荐阅读更多精彩内容