jquery动画animate小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> //jquery库引入
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 100px auto;
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }
        ul li{
            margin: 50px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 125px;
            height: 50px;
            overflow: hidden;
        }
        ul li span{
            display: inline-block;
            width: 28px;
            height: 28px;
            position: relative;
        }

    </style>
</head>

<body>
    <ul>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
    </ul>
    <script>
        $(function(){
            $('li').each(function(index,ele){
                let $url = "url(\"./images/subnav-entry-icon.png\") no-repeat 0 "+(index * -28)+"px" //背景图是精灵图，通过jquery设置每个span元素的url
                $(this).children('span').css('background',$url)
                .css('backgroundSize','28px auto');
            });
        })
        $('li').mouseenter(function(){  //监听鼠标移入事件
            $(this).children('span').animate({
                top:-50
            },500,function(){
                $(this).css('top','50px');
                $(this).animate({
                    top:0
                },400)
            })
        })
        $('li').mouseleave(function(){
            $(this).children('span').stop(false,true); //当鼠标移除li元素时，停止当前span元素的动画（完成此次动画后）
        })
    </script>
</body>

</html>
jquery动画animate小案例

猜你喜欢
