javascript - Stop animation on .siblings() -

javascript - Stop animation on .siblings() -

i'm creating page when hover div. div grow in size (width) , other divs (siblings) smaller in size (width).

i utilize mouseenter , mouseleave. can't .stop() function working. when hover 1 , less sec one. old 1 not stop.

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

code: 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", ""); });

it works improve if set .stop() in event handlers. should phone call .stop(true,true) in order finish animation. otherwise, sizes messed up. see documentation.

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", ""); });

updated fiddle: http://jsfiddle.net/5kyw9ya7/10/

javascript jquery html css siblings