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

Смотрите эту скрипку:

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

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

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

У меня следующая проблема:

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

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

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


svg raphael jquery-hover
person edt    schedule 18.08.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

person Chasbeen    schedule 18.08.2011
comment
Вы правы, и в итоге я просто добавил текст в svg вместо отдельного текста html. Но та же проблема все еще возникает. Решение состоит в том, что время начала и окончания анимации должно быть установлено на одно и то же значение. - person edt; 20.08.2011

arrow_upward
0
arrow_downward

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

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

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

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

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

См. приведенную выше скрипку для полного кода.

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

person edt    schedule 20.08.2011