jquery animation animate small case

<!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;
        }
        the {
            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){
                URL = $ the let "URL (\" ./ Images / Subnav-entry-icon.png \ ") NO-REPEAT 0" + (index * -28) + "PX" // background sprite is, by setting jquery url element for each span
                $(this).children('span').css('background',$url)
                .css('backgroundSize','28px auto');
            });
        })
        $ ( 'li'). mouseenter (function () {   // listen for mouse move events
            $(this).children('span').animate({
                top:-50
            },500,function(){
                $(this).css('top','50px');
                $(this).animate({
                    top:0
                },400)
            })
        })
        $('li').mouseleave(function(){
            $ (the this) .children ( 'span') STOP (false, to true);. // li elements when the mouse is removed, the current span to stop the animation elements (after the completion of the animation)
        })
    </script>
</body>

</html>
jquery animation animate small case

Guess you like
