jQuery глюк анимации: функции запускаются в неправильном порядке при быстром наведении

Question

ПРИМЕЧАНИЕ: я не писал сценарий, о котором идет речь, мой коллега написал. Просто добровольно, чтобы получить некоторую информацию об этом для нас. Прошу прощения за неправильные термины или описания, которые звучат как нуб; Я не сценарист, а HTML / CSS.

Страница, о которой идет речь:

http://cure.org/curekids/kenya/2010/02/joseph_muchiri/

Скриншот проблемы:

Выпуск:

Когда вы смотрите на страницу, вы видите на панели инструментов своего рода черточку вверху страницы, но чуть ниже заголовка сайта (это фрагмент с надписью "CUREkids").

Когда вы наводите курсор мыши на любую область этой панели инструментов, слева появляется небольшая зеленая вкладка, которая анимируется из-за нее (это кусок с вопросительным знаком на нем). При щелчке по вкладке открывается описательный интерфейс Slidedeck . Пока все хорошо.

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

Дополнительные сведения:

Сценарий работает так, что по умолчанию вкладка скрыта за панелью инструментов, и jQuery сначала анимирует ее слева, чтобы выйти из панели инструментов, а затем изменяет z-индекс, чтобы фактически переместить его поверх панели инструментов. элемент для максимального удобства использования и области щелчка на вкладке. Все это происходит на mouseOver. На mouseOut происходит обратное (z-index изменен на более низкий, чем панель инструментов, а затем анимируется прямо туда, где он был расположен).

Мои мысли

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

Вся помощь приветствуется.

Answer 1

В функции, которую вы определили для отпускания мыши, добавьте .stop(true, true) перед тем, как снова изменить z-index на -1.

$("#what-tag").stop(true, true).css("z-index", "-1");

Выезд http://api.jquery.com/stop/

Первый true, переданный .stop(true, true), удалит все анимации в очереди. Второй true является ключом в этой ситуации - он в основном переходит к концу функции, которую вы определили для mouseenter, и немедленно запускает обратный вызов. В этом случае, используя .stop(true, true), вы гарантируете, что z-index всегда будет установлен в 1, прежде чем установить его в -1.

Я думаю, что сейчас происходит то, что он устанавливает z-index на -1 до того, как сработает функция обратного вызова mouseenter.

Edit:

Не имеет отношения - вы также должны изучить кеширование ваших селекторов jquery в переменные. Вы вызываете $("#what-tag") шесть раз в этом методе наведения. Если вы определили переменную над методом наведения так: var $whatTag = $("#what-tag") и заменили ссылки внутри метода наведения, она будет работать быстрее.

Answer 2

Лучший из известных мне способов исправить это и контролировать поведение с помощью различных опций (например, интервал в мс, время ожидания, чувствительность и т. Д.) - это плагин jQuery, hoverIntent .

Только использование по умолчанию исправляет быстрое движение анимации запуска / очереди мыши.

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

Почему?Чтобы задержать или предотвратить случайный запуск анимации или вызовов AJAX.Простые тайм-ауты работают для небольших областей, но если ваша целевая область велика, она может выполняться независимо от намерения.

Если вы хотите только остановить очередь, посмотрите эти статьи / сообщения:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

http://css -tricks.com / full-jquery-анимации /

Answer 3

В вашей наценке переместите элемент привязки #what-tag за пределы вашего элемента div #curekids-dash, например, прямо перед ним:

                :
                :
<a class="toggle-trigger" id="what-tag" href="#">?</a>
<div id="curekids-dash">
    <a id="curekids-home-link" href="/curekids">CUREkids<span class="hover-icon">(return to CUREkids home)</span></a>

    <h1 id="helpChildNow"><a class="curekids-donate-link" href="https://secure.cure.org/curekids/donate?cause_id=5">Help <span id="childName">Joseph</span> Now</a></h1>
                :
                :

В curekids.css,строка 24, для селектора #curekids-dash, добавьте свойство z-index: 2;, сделав все правило следующим образом:

#curekids-dash {
  background:url("/img/curekids/ck-toggle-container.png") no-repeat scroll center center transparent;
  height:80px;
  position:relative;
  width:960px;
  z-index:2;
}

Это решило проблему в FF 3.6, и я был бы удивлен, если бы это не такисправить это в IE, Webkit и более ранних FF-версиях.

Answer 4

То, что происходит, - то, что функция анимации jquery, которая запускается при наведении мыши, не завершается, когда происходит событие mouseout ... таким образом, задержка в 100 мс, прежде чем предполагается изменение z-индекса в части «show» анимация в конечном итоге происходит после того, как z-индекс был изменен при помощи функции «скрыть» мыши. (Надеюсь, это имеет смысл ...)

Так что попробуйте ... изменить:

$("#curekids-dash").hover(function() {
        $("#what-tag").show();
        $("#what-tag").animate({left: "-13"}, 100, "linear", function() {$("#what-tag").css("z-index", "1");}); 
    }, function() {
        $("#what-tag").css("z-index", "-1");
        $("#what-tag").animate({left: "10"}, 100, "linear", function() {$("#what-tag").hide();});
    }
);

до:

$("#curekids-dash").hover(function() {
        $("#what-tag").show();
        $("#what-tag").animate({left: "-13"}, 100, "linear", function() {$("#what-tag").css("z-index", "1");}); 
    }, function() {
        $("#what-tag").clearQueue();
        $("#what-tag").css("z-index", "-1");
        $("#what-tag").animate({left: "10"}, 100, "linear", function() {$("#what-tag").hide();});
    }
);

важным битом является $("#what-tag").clearQueue();