我有一个问题。我正在尝试创建一种效果,其中 div
在悬停时以百分比方式扩展,而同一容器中的其他 div
正在缩小。
这就是我目前所得到的,
不多,我知道。
想要的效果很简单。悬停时,宽度从 25% 变为 40%,悬停时又变回来。
有没有人知道如何使这成为可能?
提前致谢。
HTML
<div class="wrapper">
<div class="een">een</div>
<div class="twee">twee</div>
<div class="drie">drie</div>
<div class="vier">vier</div>
</div>
CSS:
.wrapper {
width:100%;
height:200px;
overflow: hidden;
}
.wrapper div {
width:25%;
float:left;
height:300px;
}
.wrapper .een {background:#ccc;}
.wrapper .twee {background:#ddd;}
.wrapper .drie {background:#333;}
.wrapper .vier {background:#666;}
JS:
$(function () {
$(".wrapper > div").hover(
function () {
$(".wrapper > div").animate({
width: '20%'
});
$(this).animate({
width: '40%'
});
},
function () {
$(this).animate({
width: '25%'
});
$(".wapper > div").animate({
width: '25%'
});
});
});
最佳答案
你走在正确的轨道上,但你调用的是在 sibling 上运行的效果,而不是元素本身。
$(function () {
$(".wrapper > div").hover(function () {
$(this).stop().animate({
width: '40%'
}, 500);
}).mouseout(function(){
$(this).stop().animate({
width: '25%'
}, 500);
});
});
通过调用 onHover 和 onMouseOut 动画,您可以使用 $(this)
定位悬停元素。只需停止动画并在 0.5 秒的间隔内将其宽度设置为适当的大小即可。
JSFiddle
关于jquery - 悬停时使用 jquery 为宽度设置动画的多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22922093/