jquery가 테두리 애니메이션을 재설정합니다.

Question

1px 단색 테두리가있는 div가 있습니다. jquery로 경계 색 애니메이션을주고 싶습니다. 여기 내 코드가있다.

//Products border motion 
jQuery(".products-two").mouseenter(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#999999'},400); 
    }).mouseleave(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#E6E6E6'}, 800); 
    } 
    ); 

또한 ui 클래스를 가져올 수 있습니다.

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js

내 문제는;

mouseleave 기능이 작동하면 경계를 먼저 제거한 다음 테두리 색을 변경합니다. 그리고 그것은 부드러운 움직임을주지 않습니다. 어떻게해야합니까?

업데이트 - 나는 또한 동작 시간을 변경했으며 이제 마우스가 들어가면 일어나는 것을 또한 깨달았습니다. 먼저 테두리를 제거한 다음 테두리를 추가하고 색상을 변경합니다.

해결 방법 - 내 질문에 대답 할 수 없어서 관심을 가질만한 다른 사람들에게 해결책을 나누고 싶었습니다.

나는 이것이 jquery UI 클래스에 대한 버그라고 생각합니다. 때문에 기본 테두리 속성을 사용하여 일반 jquery 라이브러리를 사용할 때 작동합니다. 이 ui 메소드를 건너 뛰고이를 임시 솔루션으로 사용했습니다.

//Products border motion 
    jQuery(".products-two").mouseenter(
    function(){ 
     jQuery(this).stop().animate({borderTopColor:'#999999', borderBottomColor:'#999999',borderLeftColor:'#999999',borderRightColor:'#999999'},400); 
    }).mouseleave(
    function(){ 
     jQuery(this).stop().animate({borderTopColor:'#E6E6E6', borderBottomColor:'#E6E6E6',borderLeftColor:'#E6E6E6',borderRightColor:'#E6E6E6'},400); 
    } 
    ); 

Answer 1

prevent the animation from queueing이 필요합니다.

jQuery(".products-two").mouseenter(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#999999'},400); 
    }).mouseleave(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#E6E6E6', queue: false}, 800); 
    } 
    );