Хватит мерцать при зависании между дивами одного класса

Question

У меня есть 3 группы div, которым динамически присвоен класс. Когда пользователь наводит указатель мыши на любой из элементов div, jQuery проверяет класс и скрывает остальные с тем же классом. Это хорошо работает, но если я нахожусь между div с одинаковыми классами, jquery, похоже, срабатывает каждый раз. Предположительно потому, что его перепроверяют в классе и запускают эффект.

Мой вопрос, как я могу остановить мерцание при наведении курсора между одними и теми же классами?

Все дивы плавают влево с полем 1px. (Я пытался удалить поле BTW).

Моя разметка:

<div id="projects">

   <div class="p-1">IMAGE</div>
   <div class="p-1">IMAGE</div>
   <div class="p-1">IMAGE</div>

   <div class="p-2">IMAGE</div>
   <div class="p-2">IMAGE</div>
   <div class="p-2">IMAGE</div>

   <div class="p-3">IMAGE</div>
   <div class="p-3">IMAGE</div>
   <div class="p-3">IMAGE</div>

</div> 

И JQuery

    $('#projects div[class^=p-]').hover(function() {
        $('#projects div[class=' + $(this).attr('class') + ']').fadeTo(200, 0.2, function() {
        });
    }, function() {
        $('#projects div[class=' + $(this).attr('class') + ']').fadeTo(200, 1.0, function() {
        });
    });

И скрипка: скрипка

Answer 1

Я обновил вашу скрипку. Добавление stop() Функция должна быть достаточной для того, что я понял из ваших комментариев:

$('#projects div[class^=p-]').hover(function() {
    $('#projects div[class=' + $(this).attr('class') + ']').stop().fadeTo(0, 0.2, function() { });
    }, function() {
        $('#projects div[class=' + $(this).attr('class') + ']').stop().fadeTo('slow', 1.0, function() { });
    });

http://jsfiddle.net/hXHGe/9/

Эта функция останавливает любую предыдущую информацию. Так как наведение находится до наведения, оно останавливает анимацию бега и заставляет его оставаться блеклым до 0,2

Answer 2

Кажется, что вы зависаете между вашим человеком div элементы, курсор находится над местом за пределами вашего div class вызывая исчезновение. По мере того, как вы продолжаете наводить курсор на список элементов, эффект мерцания становится все более очевидным.

Одним из способов было бы реструктурировать разметку так, чтобы .p-#div является родительским div для этих изображений, поэтому эффект наведения мыши применяется один раз к ребенку div элементы, как так,

<div id="projects">

   <div class="p-1">
       <div>IMAGE</div>
       <div>IMAGE</div>
       <div>IMAGE</div>
   </div>

   <div class="p-2">
       <div>IMAGE</div>
       <div>IMAGE</div>
       <div>IMAGE</div>
   </div>

   <div class="p-3"> 
       <div>IMAGE</div>
       <div>IMAGE</div>
       <div>IMAGE</div>
   </div>

</div>

Отдельные дети div элементы могут иметь уникальные идентификаторы, если это необходимо, но это устранит flicking эффект, который вы сейчас видите.

Вы можете просмотреть код на этом jsfiddle

Вышеуказанная скрипка была просто демонстрацией, но, имея больше информации, мы могли бы разработать лучший способ удовлетворить ваши потребности.