jQuery：延遲懸停至第二次

在我的應用程序中，我有一個「後續」按鈕，一旦他們點擊另一個按鈕「follow」，我就會向用戶顯示，就像Twitter一樣。jQuery：延遲懸停至第二次

我的一個小問題是，當用戶點擊關注並顯示「下一步」按鈕時，它會立即更改爲「取消關注」，因爲這是我附加的懸停事件。一些代碼說明：

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

這是因爲當「後續」按鈕顯示時，它結束在光標後面，因此觸發懸停事件。我想實現的是某種方式來延遲這個懸停事件，直到鼠標指針首次退出按鈕然後返回到。 Twitter就是這麼做的，我認爲這是一個很好的UI改進。

來源

2014-12-19 n_x_l

你能否提供相關的問題HTML標記和CSS？代碼片段或jsFiddle也會有所幫助 –

點擊不會徘徊。 – putvande

使用css在懸停時裝飾你的按鈕，並在鼠標移除時移除一個css類，以便在你點擊時處理用例 – topheman

$('.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，但也許你必須使用JavaScript的原因。

來源

2014-12-19 21:11:28 Elec

只是爲了好玩，女傭在css中的示例我是在談論：http://codepen.io/topheman/pen/vEKzZL也許它可能有助於某一天。 – topheman

@topheman這是個好主意:) – Elec

要模擬Twitter的用戶界面以關閉/取消關注用戶，我建議您允許您的程序知道當前關注的狀態。您可以通過使用變量或按鈕上的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

來源

2014-12-19 21:13:36 ManBearPixel

jQuery：延遲懸停至第二次

回答

相關問題