jQuery : 두 번째 시간까지 지연 호버

Question

내 응용 프로그램에서는 Twitter 에서처럼 "따라 가기"버튼을 클릭하면 사용자에게 표시되는 "다음"버튼이 있습니다.

내 작은 문제는 사용자가 팔로우를 클릭하고 '다음'버튼을 표시하면 해당 팔로워 이벤트가 첨부되어 즉시 '팔로우 해제'로 변경된다는 것입니다. 일부 코드를 설명하기 :

$('.following').hover(
    function() { 
     var $this = $(this); 
     $this.val("Unfollow"); 
    }, 
    function() { 
     var $this = $(this); 
     $this.val("Following"); 
    } 
); 

버튼이 나타납니다 "다음"때 때문입니다, 그것은 때문에 호버 이벤트를 트리거, 커서 뒤에 끝납니다. 달성하고자하는 것은 마우스 포인터가 처음 버튼을 빠져 나가서으로 돌아올 때까지이 호버 이벤트를 지연시키는 방법입니다. 이것이 트위터가하는 방식이며 훌륭한 UI 개선이라고 생각합니다.

Answer 1

$('.follow').click(function(){   
     if($(this).attr("class") == "follow"){ 
      $(this).one("mouseleave",function(){ 
       $(this).mouseover(function(){ 
        var $this = $(this); 
        $this.html("Unfollow"); 
       }).mouseout(function(){ 
        var $this = $(this); 
        $this.html("Following"); 
       }); 
      }); 
     }else{ 
      $(this).off('mouseover mouseout'); 
      $(this).html('follow'); 
     } 
     $(this).toggleClass("follow following"); 
    }); 

예 : http://jsfiddle.net/z3t5r3ud/
이 하나를 시도하십시오.
나는 CSS를 사용하는 것을 선호하지만 어쩌면 당신은 몇 가지 이유로 자바 스크립트를 사용해야합니다.

Answer 2

사용자를 팔로우/언 폴링하기 위해 트위터의 UI를 시뮬레이트하려면 현재 팔로우 상태의 상태를 프로그램에 알리는 것이 좋습니다. 변수를 사용하거나 버튼의 data- 속성을 사용하여이 작업을 수행 할 수 있습니다. JSFiddle의 예제에서 변수를 사용하여 더 빠르게 만들었습니다.

>> Live Example: JSFiddle

var isFollowing = false; 
$(".following").click(function(){ 
    if(isFollowing == false) { 
     isFollowing = true; 
     $(this).html("Following"); 
    } 
    else if (isFollowing == true) { 
     isFollowing = false; 
     alert("unfollowing!"); 
     $(this).html("Follow"); 
    } 
}); 

$(".following").hover(
    function() { 
     if (isFollowing == true) { 
      $(this).html("Unfollow"); 
     } 
    }, 
    function() { 
     if (isFollowing == true) { 
      $(this).html("Following"); 
     } 
    } 
); 

-mbp