JQ手风琴效果,请大神帮我修改下bug
<style>*{margin:0;padding:0;}div{margin:100pxauto;width:1190px;height:340px;}a{displa...
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 100px auto;
width: 1190px;
height: 340px;
}
a{
display: inline-block;
float: left;
}
.a1{
background-image: url(img/1.jpg);
width: 790px;
height: 340px;
}
a:first-child~a{
width: 100px;
height: 340px;
}
.a2{
background-image: url(img/2.jpg);
}
.a3{
background-image: url(img/3.jpg);
}
.a4{
background-image: url(img/4.jpg);
}
.a5{
background-image: url(img/5.jpg);
}
</style>
</head>
<body>
<div>
<a class="a1"></a>
<a class="a2"></a>
<a class="a3"></a>
<a class="a4"></a>
<a class="a5"></a>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>
<script>
$("a").mouseover(function(){
$(this).stop().animate({"width":"790px"},300).siblings().stop().animate({"width":"100px"},300)
})
</script>
图片实际790*340,鼠标快速在图片中来回移动的时候,有些时候最后一直图会跑到div下面去,就是超宽,不知道怎么修改这个bug
有没有大神来挑战一下啊!!! 展开
*{
margin: 0;
padding: 0;
}
div{
margin: 100px auto;
width: 1190px;
height: 340px;
}
a{
display: inline-block;
float: left;
}
.a1{
background-image: url(img/1.jpg);
width: 790px;
height: 340px;
}
a:first-child~a{
width: 100px;
height: 340px;
}
.a2{
background-image: url(img/2.jpg);
}
.a3{
background-image: url(img/3.jpg);
}
.a4{
background-image: url(img/4.jpg);
}
.a5{
background-image: url(img/5.jpg);
}
</style>
</head>
<body>
<div>
<a class="a1"></a>
<a class="a2"></a>
<a class="a3"></a>
<a class="a4"></a>
<a class="a5"></a>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>
<script>
$("a").mouseover(function(){
$(this).stop().animate({"width":"790px"},300).siblings().stop().animate({"width":"100px"},300)
})
</script>
图片实际790*340,鼠标快速在图片中来回移动的时候,有些时候最后一直图会跑到div下面去,就是超宽,不知道怎么修改这个bug
有没有大神来挑战一下啊!!! 展开
1个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询