Jquery在懸停時更改背景顏色，一直閃爍

所以我目前正在製作一個頂級列表，並且我想爲它添加一點JavaScript。我決定在訪問者將鼠標懸停在名稱上時使背景顏色淡入。Jquery在懸停時更改背景顏色，一直閃爍

但問題是，它一直閃爍着，這很煩人！ - 這是我的代碼：

<script type="text/javascript"> 
    var isOn = false; 
    if(isOn == false) 
    { 
     $('#rank<?= $info['ID']; ?>').hover(function(){ 
      isOn = true; 
      $('#rank<?= $info['ID']; ?>').animate({ 
       backgroundColor: '#FF0000' 
      }); 
     }); 
    } 
    $('#rank<?= $info['ID']; ?>').mouseout(function(){ 
     isOn = false; 
     $('#rank<?= $info['ID']; ?>').animate({ 
      backgroundColor: 'white' 
     }); 
    }); 

</script>

我想褪色的顏色，當訪問者將鼠標懸停在該地區，並當訪問者徘徊進出該地區變回不同的顏色。

謝謝。

來源

2013-05-27 Dhamesh Makwana

爲什麼不使用'mouseOver'和'mouseOut'事件 –

就像[this]（http://jsfiddle.net/SpYk3/t84xa/）？ – SpYk3HH

的問題是，你不正確使用hover快捷。 hover實際上需要兩個函數並綁定到mouseenter和mouseleave。您目前的代碼綁定到mouseenter和mouseout，這會導致問題。

你真正想要的是這樣的：

var isOn = false; 
if(isOn == false) 
{ 
    $('#rank<?= $info['ID']; ?>').hover(function() { 
     isOn = true; 
     $('#rank<?= $info['ID']; ?>').animate({ 
      backgroundColor: '#FF0000' 
     }); 
    }, 
    function() { 
     isOn = false; 
     $('#rank<?= $info['ID']; ?>').animate({ 
      backgroundColor: 'white' 
     }); 
    }); 
}

您可能還需要包括一些.stop()功能，因此你不必與你的動畫隊列中的問題。

您不應該使用mouseover或mouseout，因爲它們在您輸入或離開某個元素時會多次觸發。舉例說明，請參見http://api.jquery.com/mouseenter/底部的演示。

來源

2013-05-27 20:03:19 nullability

哇，我真的很欣賞這一點！謝謝！但爲了我的學習，我們是否可以通過代碼？您已添加「}，function（）{」。這意味着當.hover函數完成時，這將觸發正確的？只要確定配偶。 –

是的，第一個函數在'mouseenter'觸發，第二個函數在'mouseleave'觸發。 – nullability

啊，我明白了，好吧非常感謝你的可空性。 :) –

你不能使用標準的jQuery動畫顏色，你需要額外的腳本EG：jQuery UI。

而且搜索應該有助於解決這個問題：https://stackoverflow.com/a/2302005/2373138

來源

2013-05-27 19:58:49 kelunik

看看這個外部資源;） – kelunik

我該怎麼編輯？ – kelunik

我的意思是編輯一些微不足道的東西，B/C我不能刪除沒有編輯的D/V –

您必須使用最新的Jquery color plugin。

從被非數字不能使用基本的jQuery功能性（例如，寬度，高度是動畫，或左可以是動畫api.jquery.com/animate/

...大多數性能，但背景顏色不能，除非使用jQuery.Color（）插件）。

來源

2013-05-27 20:17:48 Alister

使用CSS（3）檢查here

如果你想使用JS，使用鼠標輸入和-leave啓動/停止功能。

來源

2013-05-27 20:29:39 Jonathan

Jquery在懸停時更改背景顏色，一直閃爍

回答

相關問題