detener la animación de jquery cuando no se desplaza

Publiqué una pregunta antes sobre un div animación y estoy tratando de modificarla un poco. tengo un div que gira cuando se carga la página. Al pasar el mouse sobre él, me gustaría que se detuviera.

Aqui esta el guion

rotate(); //the function which rotates the div 
$("#div2").hover(function() {
    $("#div2").stop();
});​

Aquí está mi página JS

var obj = "div2";
var angle = 0;
var interval = 2323;
increment = 5;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    setTimeout(rotate, interval);
}​

preguntado el 03 de mayo de 12 a las 20:05

¿Realmente necesito indicar explícitamente que no se detendrá cuando esté flotando? -

Sí, lo hace, junto con cualquier otro detalle que nos ayude a ayudarlo:

3 Respuestas

Utiliza clearTimeout() método. Como ejemplo:

var obj = "div2";
var angle = 0;
var interval = 100;
var increment = 5;
var timer = null;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    timer = setTimeout(rotate, interval);
}

$("#div2").hover(function() {
    clearTimeout(timer);
}, function() {
    rotate();
});

rotate(); //the function which rotates the div​​

DEMO: http://jsfiddle.net/Uf9qZ/

contestado el 03 de mayo de 12 a las 20:05

Iba a proponer un booleano global que se verificaría dentro del rotate() función y alternar con el hover, pero su solución es mucho más elegante. +1 para usted señor. - PeligroMono

No funciona del todo bien. No gira cuando se carga la página, pero cuando paso el mouse por encima y luego retrocedo, gira ligeramente (quizás 5º). - user1104854

@user1104854 Tiene un incremento de ángulo del 5 % en 2.3 segundos. Intente disminuir el incremento de tiempo. Verifique la DEMO en la actualización de la respuesta. - Visión

Tienes razón, lo siento, me apresuré un poco con eso. No puedo creer que no me di cuenta de la hora. ¿Hay alguna forma de ralentizar gradualmente la animación en lugar de detenerla de inmediato? - user1104854

@ user1104854 Oh, esa es una historia absolutamente diferente :) Posiblemente tengas que usar otra timeout para aumentar el intervalo y finalmente borrar todo timeouts, pero será pesado. - Visión 

var elm = $("#div2"),
    angle = 0,
    interval = 2323,
    increment = 5,
    T = setInterval(rotate, interval);

elm.on({
    mouseenter: function () {
        clearInterval(T);
    },
    mouseleave: function() {
        T = setInterval(rotate, interval);
    }
});

function rotate() {
    elm.css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
}​

VIOLÍN

contestado el 03 de mayo de 12 a las 20:05

Gracias, este también funciona. ¿Hay alguna manera de "bajar" lentamente el setinteral y luego detenerlo? Decir del 1 al 2000 y luego parar? - user1104854

está haciendo su propia implementación de rotación, también tendrá que manejar la administración usted mismo, así que almacene en caché el setTimeout objeto y uso clearTimeout cuando necesitas pararlo

contestado el 03 de mayo de 12 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.