Проблемы с задержкой анимации в JQuery - PullRequest
Новая
       38

Проблемы с задержкой анимации в JQuery

1 голос
/ 12 февраля 2010

Ниже приведен код HTML и JQuery, который у меня есть:

HTML у меня есть: 

<div class="announcement">
    <img id="imgBanner" style="cursor: pointer;" onmouseover="showPopup();" />
</div>
<div id="divArrow" class="arrow">
    <img id="imgExpandContract" style="cursor: pointer;" alt="Arrow" border="0"onmouseover="showPopup();" />
</div>
<div id="window">
    <!-- some html content acting as a fly-out -->
</div>

JS код:

* +1007 *

У меня сейчас 2 проблемы:

  1. Когда я выключаю мышь # div окна, происходит небольшая задержка, перед которой вызывается отпуск мыши. Как я могу заставить это уйти? Как правило, он остается в течение нескольких миллисекунд, прежде чем предостеречь об отпуске мыши.

  2. Событие отпускания мыши иногда не срабатывает ... Иногда случается, но это случается. Мне нужно навести курсор мыши на элемент #window и вернуться назад (по сути, сделать это дважды)? Может кто-нибудь сообщить мне, почему это происходит и как я могу справиться?

Есть ли лучшие решения для этого, кроме использования animate () в JQuery? Буду рад всем / любым предложениям. Я пытаюсь выполнить эффект «вылет / слайд» с содержимым внутри div.

Большое спасибо за помощь

1 Ответ

3 голосов
/ 13 февраля 2010

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

"Хорошо, он использует jquery ... подождите, я думал, что он использует jquery ... WTF?".

  1. Зачем использовать getElementById? используйте $('#myid').
  2. Зачем использовать style.visibility? используйте $(selector).css('visibility', value);
  3. Не используйте атрибуты элемента для привязки событий ... используйте jquery $(selector).hover(openPopup, closePopup);

Ладно, когда вы не запускаете мышиную мышку, вы уверены, что мышь покинула область? Я имею в виду, вы уверены, что размеры div немного больше, чем вы думаете? Если это не так, это может быть просто время, необходимое для выполнения функции, или это может быть то, что она не выполнена анимацией (то есть. isDone = false). По моему мнению, вместо того, чтобы пытаться определить, выполняется ли какая-либо анимация, я бы просто позвонил $(element).stop(true);, чтобы остановить анимацию в ее конечной точке, а затем продолжить с другой анимацией. Это должно быть довольно надежно. Также я считаю, что если вы вызовете его с false или полностью пропустите аргумент, он остановит его именно там, где он есть ... что позволит вам активировать анимацию выхода из текущего места без необходимости расчета позиции.

Кроме того, я не знаю, как это выглядит на самом деле, но, возможно, вам даже не нужно использовать animate, вы можете использовать один из встроенных эффектов, например slide или что-то еще - вы можете захотеть посмотреть в том числе.

...