Остановить анимацию на.siblings()

Question

Я создаю страницу, когда вы наводите div. Этот div будет увеличиваться в размере (ширине), а остальные div (братья и сестры) будут меньше в размере (ширине).

Я использую mouseenter и mouseleave. Но я не могу заставить работать функцию.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/