2022-06-12 jQuery案例:手风琴效果的实现

前端OnTheRun

已于 2022-11-02 12:11:43 修改

阅读量134

点赞数

分类专栏： jQuery 项目与应用文章标签： javascript jquery jq 手风琴效果手风琴

于 2022-06-12 22:23:50 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/125251106

版权

项目与应用同时被 2 个专栏收录

57 篇文章 1 订阅

订阅专栏

jQuery

16 篇文章 1 订阅

订阅专栏

思路

鼠标移入:当前所在li对应的宽度增加,其兄弟节点宽度减小
鼠标移出:宽度恢复
在animate()动画前加stop(),是为了防止鼠标快速移动时,animate动画要全部执行,造成不好的类似幻灯片的效果

代码

<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    ul li {
        list-style-type: none;
    }
    
    ul {
        margin: 100px;
        width: 640px;
        height: 200px;
        display: flex;
        border: 5px solid skyblue;
    }
    
    li {
        width: 160px;
        overflow: hidden;
    }
</style>

<body>
    <ul>
        <li><img src="./1.jpg" alt=""></li>
        <li><img src="./2.jpg" alt=""></li>
        <li><img src="./3.jpg" alt=""></li>
        <li><img src="./4.jpg" alt=""></li>
    </ul>
    <script>
        $("ul > li").mouseover(function() {
            $(this).stop().animate({
                width: 520
            }).siblings().stop().animate({
                width: 40
            })
        });
        $("ul").mouseout(function() {//注意这里是离开了整个ul才恢复,不是ul>li
            $(this).stop().animate({
                width: 160
            }).siblings().stop().animate({
                width: 160
            })
        });
    </script>
</body>