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

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

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

Все элементы div перемещаются влево с отступом в 1 пиксель. (Кстати, я пытался удалить маржу).

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

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

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


class flicker jquery jquery-hover fadeto
person Victor    schedule 04.04.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я обновил вашу скрипку. Добавления функции 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.

person JSantos    schedule 04.04.2013
comment
Бум. Это тот. Я уже пробовал это, но мне это не помогло!? Возможно, мое приложение не обновилось. Я только что попробовал это снова после вашей подсказки и бинго, работает. Спасибо за ваше время - person Victor; 04.04.2013

arrow_upward
0
arrow_downward

Кажется, когда вы наводите курсор между вашими отдельными элементами 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.

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

person Anthony Forloney    schedule 04.04.2013
comment
Спасибо за ответ. Я бы изменил разметку, но я действительно хочу оставить ее как есть из эстетических соображений. Я хочу, чтобы изображения могли разбиваться на отдельные строки. Я добавил скрипку для уточнения. Кроме того, я удалил поля и т. д., поэтому между каждым div (p-#) не должно быть пробела? - person Victor; 04.04.2013
comment
Почему бы вам не добавить новый класс, как продемонстрировал @Anthony, к вашим текущим div, а затем выполнить постепенное изменение этих новых классов? - person JSantos; 04.04.2013
comment
@JSantos Не могли бы вы уточнить? К вашему сведению: каждая группа изображений/div создается динамически с использованием CMS. - person Victor; 04.04.2013
comment
Что-то вроде этого jsfiddle.net/nXSVe/1. Я обновил скрипку Энтони тем, что имел в виду. . Я не уверен, где ваша проблема, может быть, это исправит ее. С Уважением - person JSantos; 04.04.2013
comment
@Victor Поскольку проблема заключается в том, что ваш курсор может нависать над пробелом между div, вызывающим мерцание, вам нужно будет заключить эффект наведения на родительский элемент, чтобы избежать мерцания (что-то, что я предложил). Вы бы знали, что работает с вашей разметкой, идея заключалась в том, чтобы проиллюстрировать эффект наведения на родительский элемент div. - person Anthony Forloney; 04.04.2013
comment
@JSantos Хорошо, понятно. Это способ сделать это, и он работает, но я не хочу, чтобы изображения группировались в таком контейнере. Я бы хотел, чтобы они разливались (как в моей скрипке), чтобы изображение в одной группе могло находиться в двух разных строках. Имеет ли это смысл? Обригадо! - person Victor; 04.04.2013
comment
@энтони, да, я понимаю. Спасибо. Я собираюсь попробовать несколько вещей, сообщив о результатах. - person Victor; 04.04.2013
comment
@ Виктор, да, это имеет смысл. Без использования div я могу только догадываться, что вам нужно сделать некоторый анализ javascript - person JSantos; 04.04.2013