.siblings()에서 애니메이션을 중지하십시오.

Question

div를 가리키면 페이지가 생성됩니다. 이 div는 크기 (너비)가 커지고 다른 div (형제)는 크기 (너비)가 작아집니다.

마우스 센터와 마우스 리브를 사용합니다. 하지만 .stop() 함수를 작동시킬 수 없습니다. 하나를 가리키면 다른 하나는 1 초 미만입니다. 늙은 사람은 멈추지 않을 것입니다.

라이브 예 :
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)으로 호출해야합니다. 그렇지 않으면 크기가 엉망이됩니다. 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", ""); 
}); 

업데이트 바이올린 : http://jsfiddle.net/5kyw9ya7/10/