1
Я начинаю играть с изображениями SVG, я сделал два зубчатых колеса, которые должны включаться .mouseenter() и останавливаться на .mouseleave(). Поворот производится функцией setInterval. У меня странная проблема, потому что на Linux Chromium все работает хорошо. В Linux Firefox и Windows Chrome и Firefox колесики не останавливаются на mouseLeave и ускоряются на mouseEnter. Я пытался использовать методы .hover() и .mouseenter()/mouseLeave().jQuery mouseleave и clearInterval не работает
Мой код:
$(document).ready(function(){
var deg = 0;
var rotate_right = $('#cog1 use');
var rotate_left = $('#cog2 use');
var interval;
$("#cogs").hover(
function(){
interval = setInterval(function(){
if(deg >= 360) deg = 0;
deg += 1;
rotate_right.attr('transform', 'rotate('+deg+',32,32)');
rotate_left.attr('transform', 'rotate('+-deg+',32,32)');
}, 10);
},
function(){
clearInterval(interval);
}
);
});
Мой JSfiddle
Это зависит от того, как мышь над ним. Кажется, в вашем контейнере есть дыра, поэтому, если вы переместитесь слева направо по центру, он установит новый интервал, прежде чем получит шанс очистить старый. Я добавил четкий интервал для входящей части мыши (с проверкой на нуль и установкой на нуль после очистки) и посмотреть, что происходит: http://jsfiddle.net/UM88Y/2/ – gpgekko