Question

我有一个问题。我尝试创建一种效果，其中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%'
        });
    });
});

Answer 1

你是在正确的轨道上，但你正在调用效果来运行兄弟姐妹，而不是元素本身。

$(function () {
     $(".wrapper > div").hover(function () {
         $(this).stop().animate({
             width: '40%'
         }, 500);
     }).mouseout(function(){
         $(this).stop().animate({
             width: '25%'
         }, 500);
     });
});

通过调用动画onHover和onMouseOut，您可以使用$(this)来定位悬停元素。只需停止动画并在0.5秒的间隔内将其宽度设置为适当的大小。

多个div在悬停时用jquery动画宽度

1 个答案:

JSFiddle