Как анимировать меню с помощью JQuery.hover и Raphael.animate?

Question

См. Эту скрипку:

http://jsfiddle.net/UfP3C/3/

Каждый элемент списка содержит элемент SVG.

Моя цель - когда пользователь наводит курсор на элементы списка, анимация Рафаэляпроисходит (для его дочернего элемента svg).

У меня возникает следующая проблема:

• JQuery.hover отлично работает при медленном перемещении мыши.Но когда вы быстро наводите курсор мыши (и выключаете) оба элемента списка (по горизонтали), элементы svg часто застревают в анимации «mouseenter».

Я пытаюсь понять, какзаставить анимацию работать должным образом: при быстром наведении мышки на оба элемента списка конечный результат заключается в том, что элементы svg находятся в положении «mouseleave».

Приведенная выше скрипка демонстрирует проблему (в FireFox 5 и Chrome13).

Answer 1

См. Эту скрипку для решения:

• http://jsfiddle.net/UfP3C/4/

Чтобы предотвратить зависание анимации svg в позиции анимации мыши, установите вход и выход анимациивремя для одного и того же значения:

 list_item.hover(function() {
    my_rectangle.animate({
        y: 0
    }, 400, 'bounce');

},function(){
    my_rectangle.animate({
        y: 200
    }, 400, 'bounce');
});

В приведенном выше коде время анимации равно 400. Установка обоих значений времени анимации на одно и то же значение решает проблему.

Полный код приведен в приведенной выше скрипте.

Обратите внимание, что использование функции наведения Raphael вместо функции наведения JQuery (с разным временем анимации) все еще показывает ту же проблему и имеет то же решение.

Answer 2

Я бы порекомендовал использовать родную мышь Рафаэля и mouseout. Они быстро реагируют на эти события. Вы также сможете жестко связать анимацию с ключевым словом "this"