Почему мой объект окружения Raphael.js не получает атрибуты 'attr', анимированные и не получающие объект события jQuery HandlerOut?

Question

Я создал a #logo DIV, который состоит из меньшего размера #circle DIV & h1. #circle действует как DIV/canvas, что мой объект Raphael.js, круг, отображается. Моя цель состояла в том, чтобы сделать это, когда пользователь наводит курсор на #logo DIV, круг Raphael.js и h1 будут анимированы, но я побежал в некоторые проблемы.

• По какой-то причине мой Raphaël.js объект круг не получает это .attr() метод анимации во время события мыши JQuery .hover()handlerIn. Это изменение происходит немедленно.

• Кроме того, во время события handlerOut круг Raphael.js не применяется к его методу .attr(). Он просто держит .attr() атрибуты, которые были применены к нему во время handerIn события

Код для my example of this issue is located here. Вы можете щелкнуть предварительный просмотр (вверху справа) на этой странице, чтобы увидеть код в действии.

Answer 1

$(c.node).animate({fill: "#666"}, 2000); 

Это анимация jQuery. Очевидно, jQuery не имеет представления о объектах Рафаэля. Используйте Raphaël анимацию вместо:

c.animate({fill: "#666"}, 2000); 

Общие рекомендации не трогают свойство узла, если вы действительно не знаете, что вы делаете.