jquery实现手风琴最简代码

主页 M

jquery实现手风琴最简代码

2020-05-22 网页编程网 网页编程网

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style> 
* {margin:0;padding:0}
.wrap{
    width: 1090px;
    height: 429px;
    margin: 0 auto;
    background-color: pink;
}
.list{
    float: left;
    width:100px;
    height: 429px;
    margin: 0 auto;
    background-color: blue; 
    background-image: url('1.jpg');
}
.list:nth-child(2){
    background-image: url('1.jpg');
}
.list:nth-child(3){
    background-image: url('1.jpg');
}
.list:nth-child(4){
    background-image: url('1.jpg');
    width: 789px;
}
.hide{
    width: 100px;
    height: 429px;
    background-color:rgba(0,0,0,.6);
}
.hide p{
    color: white;
    padding: 42px;
}
</style> 
</head> 
<body> 
<div class="wrap">
    <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
        <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
    <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
        <div class="list">
<div class="hide"><p>我是真心喜欢你</p></div>
    </div>
</div>
<script>
    $(".list").hover(function(){
        $(this).stop().animate({
            width:'789px'
        },500).siblings().stop().animate({
            width:'100px'
        })
    });
</script>
</body>

阅读原文

阅读 3336

123 显示电脑版