jQuery Photo Gallery Ошибка, если мышь быстро перемещается

Question

Это очень странная ошибка, мой код, скорее всего, правильный, поскольку он работает в большинстве случаев, за исключением того, что мышь очень быстро перемещается по элементам.

Вот мой 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> 

Всякий раз, когда я двигаю мышь вокруг изображений в нормальной скорости, без спешки, все работает отлично. Но всякий раз, когда я пытаюсь быстро перемещать указатель мыши над элементами, он вызывает ошибку с кнопкой Toggle: некоторые элементы остаются с opacity 1.0.

Я удаляю атрибут стиля после завершения каждой анимации, потому что я не хочу, чтобы какой-либо элемент оставался со стилем = "opacity: 1;", поскольку он перезаписывал любое противоречивое правило класса CSS, которое применяется к элементу ,

Я включил обратную связь <div>, так что я могу отслеживать, удаляется ли атрибут стиля или нет, и да, независимо от того, насколько быстро движется мышь, код внутри там выполнен, а стиль не определен.

Кроме того, я знаю, что таблицы стилей читаются сверху донизу, поэтому я включил класс «selected» после «fadeto», поскольку его правило прозрачности имеет более высокий приоритет, чем другие.

Если у меня есть код с кодом, пожалуйста, помогите мне? В противном случае, что я могу сделать? Что ты предлагаешь?

Answer 1

Я настоятельно рекомендую hoverIntent когда вы играете вокруг мыши над и мыши из

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

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

Надеется, что это помогает

Answer 2

У меня были аналогичной проблема до и обнаружили, что использование MouseEnter и MouseLeave вместо мыши и мышки решили проблему