三十六、jquery手风琴效果

1.基本结构样式

2.添加手风琴展开事件：当鼠标进入某个图片，展开当前图片，其同胞兄弟合起来，并设置相应的样式

注意：需要使用stop()处理连续多次滑动的情况；

$(this).mouseenter(function(){
    //设置span属性
    $(this).children("span").css({
        borderStyle:"none",
        backgroundColor:"rgba(3, 2, 3, 0)"
    });

    //展开
    $(".block").stop().animate({
        width:"1200px"
    },500,"linear");
    $(this).stop().animate({
        width:"600px"
    },500,"linear").siblings().stop().animate({
        width:"120px"
    },500,"linear",function(){
        $(this).children("span").css({
            border:"1px solid silver",
            backgroundColor:"rgba(3, 2, 3, 0.24)"
        });
    })
});

3.添加鼠标离开整体框事件，设置属性回归最初状态，并处理不断进入出去情况

注意：需用stop()停止当前运行动画在将进行下一动画时；

$(".block").mouseleave(function(){
    $(".ulinfo li").stop().animate({
        width:"120px"
    },500,"linear",function(){
        $(this).children("span").css({
            border:"1px solid silver",
            backgroundColor:"rgba(3, 2, 3, 0.24)"
        });
    });
    $(this).stop().animate({
        width:"720px"
    },500,"linear")
})

4.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        .block{
            width: 720px;
            height: 300px;
          /*  border: 1px solid red;*/
            margin: 20px;
            overflow: hidden;
            position: relative;
        }
        .ulinfo{
            width: 3600px;
            height: 300px;
        }
        .ulinfo li{
            list-style: none;
            float: left;
            width: 120px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }
        span{
            display: inline-block;
            width: 120px;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.3);
            border: 1px solid silver;
        }
        .imglist{
            width: 600px;
            height: 300px;
            position: absolute;
            top: 0;
            z-index: -1;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="js/jquery-3.0.0.js"></script>
    <script>
        $(function(){
            $(".ulinfo li").each(function(){

                $(this).mouseenter(function(){
                    //设置span属性
                    $(this).children("span").css({
                        borderStyle:"none",
                        backgroundColor:"rgba(3, 2, 3, 0)"
                    });

                    //展开
                    $(".block").stop().animate({
                        width:"1200px"
                    },500,"linear");
                    $(this).stop().animate({
                        width:"600px"
                    },500,"linear").siblings().stop().animate({
                        width:"120px"
                    },500,"linear",function(){
                        $(this).children("span").css({
                            border:"1px solid silver",
                            backgroundColor:"rgba(3, 2, 3, 0.24)"
                        });
                    })
                });

                $(".block").mouseleave(function(){
                    $(".ulinfo li").stop().animate({
                        width:"120px"
                    },500,"linear",function(){
                        $(this).children("span").css({
                            border:"1px solid silver",
                            backgroundColor:"rgba(3, 2, 3, 0.24)"
                        });
                    });
                    $(this).stop().animate({
                        width:"720px"
                    },500,"linear")
                })
            })
        })
    </script>
</head>
<body>
<div class="block">
    <ul class="ulinfo">
        <li><span>1</span><div class="imglist"><img src="image/demo1.jpg"></div></li>
        <li><span>2</span><div class="imglist"><img src="image/demo2.jpg"></div></li>
        <li><span>3</span><div class="imglist"><img src="image/demo3.jpg"></div></li>
        <li><span>4</span><div class="imglist"><img src="image/demo4.jpg"></div></li>
        <li><span>5</span><div class="imglist"><img src="image/demo5.jpg"></div></li>
        <li><span>6</span><div class="imglist"><img src="image/demo6.jpg"></div></li>
    </ul>
</div>
</body>
</html>

三十六、jquery手风琴效果

猜你喜欢