一个手风琴效果的jquery动画

最新推荐文章于 2023-01-21 18:49:29 发布

Sixteen_

最新推荐文章于 2023-01-21 18:49:29 发布

阅读量665

点赞数

分类专栏： jquery 文章标签： jquery 动画

本文链接：https://blog.csdn.net/Auyuer/article/details/76284239

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        .li_list{
            float:left;
            overflow:hidden;
            list-style:none;
            width:100px;
            height:300px;
        }
        .block{
            width:602px;
            height:300px;
            float:left;
            text-align:center;
            line-height:300px;
            background-color: rgba(255, 165, 0, 0.38);
        }
        .back{
            width:500px;
            height:300px;
            border:1px solid #ccc;
            float:left;
        }
        .li_list img{
            width:100%;
            height:100%;
        }
        .li_mo{
            width:602px;
        }
        .animal{
            float:left;
            width:100px;
            height:300px;
            display:inline-block;
        }
    </style>
</head>
<body>
<ul>
    <div class="clear"></div>
    <li class="li_list li_mo" >
        <div class="block">
            <span class="animal">萌宠</span>
            <div class="back">
                <img src="7.25/img/0.jpg">
            </div>
        </div>
    </li>
    <li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/1.jpg"></div></div></li>
    <li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/2.jpg"></div></div></li>
    <li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/3.jpg"></div></div></li>
</ul>
<script src="7.25/jquery-3.0.0.js"></script>
<script type="text/javascript">
    $(function(){
        $(".li_list").each(function(){
        //each遍历
            $(this).mouseenter(function(){
                       $(this).stop().animate({"width":"600px"},500,"linear").siblings().stop().animate({"width":"100px"},500,"linear")
            })//当鼠标进入时，让改元素撑开，而其他的元素合住，stop()用来防止当鼠标晃动多次时带来的延迟的bug   
        })
    })
</script>
</body>
</html>