Сброс тайм-аута не приведет к сбросу позиции объекта - , поскольку переменная mov используется совместно, это приведет к проблемным операциям во время переходов. Вы получите «последнее» значение перемещения, даже еслиновый перемещаемый элемент не выровнен соответственно.
Возможные исправления:
Всегда получать позицию элемента из значения CSS - это сохранитпозиция для каждого элемента (так же работает анимация в jQuery).
Сохранение поиска ( или привязка ) для каждого перемещения элемента, которое поддерживает позицию.Хотя я бы использовал первый, так как он проще.Для следующей части (поддержание идентификаторов таймера) будет использоваться # 2: -)
Кроме того, вам нужно будет поддерживать работу таймеров до тех пор, пока операция не будетбыло завершено (не просто произошел переход).Таким образом, общие значения stopUp и stopDown приведут к тем же проблемам , что и с указанным выше общим mov.(Это прозрачно обрабатывается с помощью очередей анимации jQuery).Тем не менее, № 1 сверху не работает хорошо здесь.Итак, давайте рассмотрим использование # 2 с привязками замыкания - для этого необходимо, чтобы события щелчка были присоединены в коде.
function addFlyout (elm) {
var timerId
elm.onmouseover = function () {
// now can use timerId and it will only be accessible
// to things within *this* invocation of addFlyout, including
// inside here.
timerId = setTimeout(function () {
...
if (needToDoMore) {
// it's easy to reference the anonymous function inside
// with arguments.callee. alternatively, setInterval could be used
timerId = setTimeout(arguments.callee, ...)
}
}, ...);
}
elm.onmouseout = function () {
// ditto
}
}
...
addFlyout(document.getElementById("Menu1"))
Заметки о закрытии Jibbering JS содержатмного полезной информации.Этот подход также может быть использован для mov, но, как и выше, я думаю, что в этом случае проще просто всегда получать текущее значение CSS.
Кроме того, проверьте свою разметку (избегая других глупостей браузера) изнать о проблемах с onmouseover / out - если перемещенный элемент перемещается (или изменяет форму) элемента, обрабатывающего события мыши, могут быть проблемы с инициируемыми событиями или пропущенными .
Использование jQuery - или аналогичного кросс-браузерного фреймворка - может упростить код и тривиально обработать вышеуказанный случай. (jQuery даже поставляется со встроенной функцией анимациитоже!)
jQuery (без использования готовой системы) будет выглядеть примерно так:
// get all elements to apply animation to
var elements = $("#Menu1").add("#Menu2").add("#Menu3")
elements.hover(function () { // over
$(this).stop().animate({top: 140})
}, function () { // out
$(this).stop().animate({top: 0})
})
Угадайте, что я бы порекомендовал: -)
Удачного кодирования.