停止.siblings()上的动画

Question

当你悬停一个div时，我正在创建一个页面。该div的大小(宽度)将增长，而其他div(兄弟姐妹)的大小(宽度)将变小。

我用鼠标和鼠标。但我无法使.stop()函数正常工作。当你悬停一秒钟不到一秒钟的时候。老的不会停下来的。

活生生的例子：

http://jsfiddle.net/5kyw9ya7/7/

代码：

Html：

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

Css：

body, html {
    margin:0px;
    overflow:hidden;
}
div {
    float:left;
    height:100vh;
    top:0;
    bottom:0;
}
.one {
    background-color:orange;
}
.two {
    background-color:yellow;
}
.three {
    background-color:red;
}
.four {
    background-color:purple;
}
.five {
    background-color:green;
}

Jquery：

var breedte = $(window).width() / 5;
$("div").css("width", breedte);

$("div").stop()
    .mouseenter(function () {
    $(this).animate({
        width: "+=100"
    });
    $(this).siblings().animate({
        width: "-=25",
    });
    $(this).siblings().css(
        "backgroundColor", "grey");
})
    .stop().mouseleave(function () {
    $(this).animate({
        width: "-=100"
    });
    $(this).siblings().animate({
        width: "+=25"
    });
    $(this).siblings().css(
        "backgroundColor", "");
});

Answer 1

如果将.stop()放在事件处理程序中，效果会更好。您还应该将它称为.stop(true,true)，以便它能够完成动画。否则，尺寸就会乱七八糟。见文档。

var breedte = $(window).width() / 5;
$("div").css("width", breedte);

$("div").stop()
    .mouseenter(function () {
    $(this).stop(true,true).animate({
        width: "+=100"
    });
    $(this).siblings().stop(true,true).animate({
        width: "-=25",
    });
    $(this).siblings().css(
        "backgroundColor", "grey");
})
    .stop().mouseleave(function () {
    $(this).stop(true,true).animate({
        width: "-=100"
    });
    $(this).siblings().stop(true,true).animate({
        width: "+=25"
    });
    $(this).siblings().css(
        "backgroundColor", "");
});

更新小提琴：http://jsfiddle.net/5kyw9ya7/10/