jquery - 悬停时使用 jquery 为宽度设置动画的多个 div

Question

我有一个问题。我正在尝试创建一种效果，其中 div 在悬停时以百分比方式扩展，而同一容器中的其他 div 正在缩小。

这就是我目前所得到的，

link

不多，我知道。

想要的效果很简单。悬停时，宽度从 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%'
        });
    });
});

Answer 1

你走在正确的轨道上，但你调用的是在 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