jQuery Photo Gallery Bug如果鼠標移動速度很快

這是一個非常奇怪的錯誤，我的代碼很可能是正確的，因爲它在大多數情況下工作，除非鼠標快速移動元素。jQuery Photo Gallery Bug如果鼠標移動速度很快

這裏是我的CSS：

<style type="text/css"> 
     .fadeto { 
      opacity:0.4; 
      position:box; 
     } 
     .selected { 
      opacity:1.0; 
      border-style:solid; 
      border-color:gold; 
     } 
    </style>

這裏是我的html正文：

單擊該圖像切換其永久的知名度。或點擊此處來切換他們都：切換

<div style="margin:50px;"> 
<img class="fadeto" src="nature.jpg" /><!--you can change the source--> 
<img class="fadeto selected" src="nature.jpg" /><!--by default selected, just not to waste time selecting elements--> 
<img class="fadeto" src="nature.jpg" /> 
<img class="fadeto" src="nature.jpg" /> 
<img class="fadeto" src="nature.jpg" /> 
<img class="fadeto" src="nature.jpg" /> 
<img class="fadeto" src="nature.jpg" /> 
<img class="fadeto" src="nature.jpg" /> 
</div> 
<div id="feedback"></div>

這裏是我的jQuery腳本：

<script> 
     $(document).ready(function(){ 
      $('.fadeto').hover(function(){ 
        $(this).fadeTo(100, 1); 
       },function() { 
        if(!$(this).hasClass('selected')) 
         $(this).fadeTo(100,0.4, function(){ 
          $(this).removeAttr('style'); //removed IF not selected 
          document.getElementById('feedback').innerHTML +=$(this).attr('style'); 
         }); 
        else { 
         $(this).removeAttr('style'); //removed IF selected 
         document.getElementById('feedback').innerHTML +=$(this).attr('style'); 
         } 
       }) 
      .click(function(){ 
       $(this).toggleClass('selected'); 
       }); 

      $('#Toggle_Button').click(function(){ 
       $('.fadeto').toggleClass('selected'); 
       }); 
}); 
</script>

每當我移動圖像周圍的鼠標在正常速度，沒有手忙腳亂，一切完美。但是，每當我嘗試將鼠標移動到元素上時，它都會導致「切換」按鈕的錯誤：某些元素保留在不透明度1.0中。

因爲我不想讓任何元素留在style =「opacity：1;」中，因爲它會覆蓋應用到元素的任何衝突的CSS類規則。

我已經收錄了反饋<div>，這樣我就可以跟蹤是否刪除樣式屬性，是的，無論鼠標移動多快，其中的代碼都會執行，樣式不確定。

此外，我知道樣式表是從上到下閱讀的，所以我在'fadeto'之後加入了'selected'類，因爲它的不透明度規則比另一個更優先。

如果我的代碼有問題，請幫助我嗎？否則，我該怎麼辦？你有什麼建議？

來源

2013-08-05 user2653125

當您快速移動鼠標時，您的反饋是否表示樣式屬性仍然存在，或者你仍然得到'未定義'？ – GreatBigBore

我得到undefined ... – user2653125

你有沒有試過用調試器看問題？ Chrome調試器將向您顯示html元素以及與其相關的所有樣式。 – GreatBigBore

-1

我會強烈建議hoverIntent當你周圍的鼠標和鼠標發揮出

$(selector).hoverIntent({ 
    over: function(){}, 
    out: function(){}, 
    selector: '.selector' 
});

http://cherne.net/brian/resources/jquery.hoverIntent.html

希望這有助於

來源

2013-08-05 13:00:49 Razmig

這似乎是個好主意。但如何才能實現與jQuery庫，沒有插件相同的效果？也許用JavaScript的setTimer或jQuery延遲？謝謝 – user2653125

是的邏輯是在執行前延遲一段時間，通過插件並嘗試找到你的出路，但我認爲最好使用插件，因爲你可能需要它幾次 – Razmig

這是一個評論，而不是一個回答。 – GreatBigBore

-1

我以前也有過類似的問題，發現使用的mouseenter和鼠標離開而不是mouseover和mouseout解決了問題

來源

2013-08-05 13:05:03

這是一條評論，而不是答案。 – GreatBigBore

jQuery Photo Gallery Bug如果鼠標移動速度很快

回答

相關問題