當我快速滑動鼠標時，jQuery懸停卡住

我有一個說「已訂閱」的按鈕，當用戶將鼠標懸停在它上面時，我想用另一個表示「取消訂閱」的按鈕替換它。當我快速滑動鼠標時，jQuery懸停卡住

（有點像Twitter的如何有以下按鈕，如果你懸停即變爲取消關注。）

這裏就是我這麼遠。

$(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"); 
    }); 
});

一切都OK，但當我鼠標快，在這種情況下，「懸停」似乎獲得被檢測，而不是「懸停關」。所以我的按鈕偶爾會陷入「UNSUBSCRIBE」......這很奇怪，並且視覺上分散注意力。

我在Stackoverflow上看到的大多數解決方案都與停止動畫有關，但在這種情況下，我不會動畫任何東西;這是一個簡單的顯示開/關。

任何想法？

來源

2012-04-04 isthmus

請你提交一個活生生的例子？ – Jorge 2012-04-04 19:11:30

實際上有一些叫做：懸停在CSS爲此，並且有代碼中的許多函數的方式？ – adeneo 2012-04-04 19:15:44

請使用緩存... – binarious 2012-04-04 19:17:09

沒有看到它的行動，我假設這是因爲你顯示/隱藏2個不同的html元素。當你快速地將鼠標移出或移出時，非活動元素可能不會變爲活動狀態等，從而導致問題。

爲了獲得更好的穩定性和性能，我想提出以下建議：

只能使用一個單一的HTML元素爲您訂閱/退訂，而非顯示/隱藏2個元素，簡單地改變按鈕的文本和/或者通過改變css類等來更換背景圖像。如果使用圖像背景更好的是使用包含兩種狀態的單個背景圖像，並根據當前狀態更新背景位置，則更好。

以上只是一個概念，因爲您尚未發佈整個代碼，因此無法修改上述代碼。

來源

2012-04-04 19:19:25

謝謝，這是它！ @binarious給了我一個很好的片段。感謝你們兩位。 – isthmus 2012-04-04 19:59:08

在jQuery中有一些叫做mouseenter和mouseleave的方法。 http://api.jquery.com/mouseenter/ 如果你使用這些，它將有助於適當的冒泡並應該解決你的問題。

來源

2012-04-04 19:20:58 laymanje

認爲會這樣做，但沒有骰子，可悲。 – isthmus 2012-04-04 19:55:47

你可以發佈一個mouseenter的例子，並保持使用狀態嗎？ – laymanje 2012-04-04 19:57:34

我會用一個元素：

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

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

});

來源

2012-04-04 19:21:22 binarious

謝謝！ @KP。給了我理論，並且你給了我練習。很棒。 – isthmus 2012-04-04 19:58:40

當我快速滑動鼠標時，jQuery懸停卡住

回答

相關問題