마우스를 빠르게 움직이면 jQuery 마우스가 움직이지 않는다.

Question

"SUBSCRIBED"라는 버튼이 있는데, 마우스를 올려 놓으면 "UNSUBSCRIBE"라고 쓰여있는 다른 버튼으로 바꿀 수있다.

은 (종류의 트위터 당신이 올려 놓으면 팔로 잉 언 팔로우로 변신 다음 버튼을 얼마나 좋아.)

는 여기에 지금까지있어거야.

$(document).ready(function(){ 
    $('#subscribed_button').hover(function(){ 
     $('#subscribed_button').css("display","none"); 
     $('#unsubscribe_button').css("display","inline"); 
    },function(){ 
    }); 
    $('#unsubscribe_button').hover(function(){ 
    },function(){ 
     $('#unsubscribe_button').css("display","none"); 
     $('#subscribed_button').css("display","inline"); 
    }); 
}); 

모든이 경우 "에 가져가"감지 얻을 것 같다,하지만 "를 해제 가져가"아니, 때 마우스를 신속하게 제외 A-OK입니다. 그래서 내 단추가 때때로 "UNSUBSCRIBE"에 갇히게됩니다 ... 이상하고 시각적으로 혼란 스럽습니다.

Stackoverflow에서 보았던 대부분의 솔루션은 애니메이션을 중지하는 것과 관련되어 있지만이 경우 애니메이션이 아닙니다. 그것은 on/off 간단한 디스플레이입니다.

아이디어가 있으십니까?

Answer 1

2 개의 다른 html 요소를 표시하거나 숨기고 있기 때문에 실제로 동작하지는 않습니다. 마우스를 빠르게 움직이면 비활성 요소가 활성화되지 않아 문제를 일으킬 수 있습니다. 나는 다음과 같은 권하고 싶습니다 더 나은 안정성과 성능을

:/보여주는 두 요소를 숨기고 당신의 가입/탈퇴에 대한

를 사용하여 단 하나의 HTML 요소를, 그리고보다는이, 단순히 버튼의 텍스트를 변경하고/또는 CSS 클래스 변경 등을 통해 배경 이미지를 바꿀 수 있습니다. 이미지 배경을 사용하면 두 상태가 모두 포함 된 단일 배경 이미지를 사용하고 현재 상태에 따라 배경 위치를 업데이트하는 것이 더 좋습니다.

위 코드는 전체 코드를 게시하지 않았으므로 간단히 개념이므로 위 코드를 수정하는 것은 불가능합니다.

Answer 2

jQuery에는 mouseenter 및 mouseleave라는 메소드가 있습니다. http://api.jquery.com/mouseenter/ 이들을 사용하면 적절한 버블 링에 도움이되며 문제를 해결해야합니다.

Answer 3

난 그냥 하나 개의 요소를 사용합니다 :

$(function() { 
    var $sub = $('#subscribe_button'); 

    $sub.hover(function() { 
     $sub.text('Unsubscribe'); 
    }, function() { 
     $sub.text('Subscribe'); 
    }); 

});