cómo hacer que la animación esté inactiva durante algún período de tiempo en jQuery

aquí el enlace jsfiddle a mi problema http://jsfiddle.net/XnnvD/35/ (no funciona del todo)

Intentaré explicar cuál es el problema, tengo 3 conjuntos de animación en jQuery

1- La imagen rebota y se desvanece después de un período de tiempo como se muestra a continuación:

$('#homePageImage').animate(
                    { top: '50px' },
                    { queue: false, duration: 1000, easing: 'easeOutBounce' });
$('#homePageImage').delay(3000).effect('drop', { direction: "right" });

2- Conjunto de imágenes .fadeIn() aleatoriamente como se muestra a continuación:

randNumArray = shuffle(randNumArray);
for (var i = 0; i < 9; i++)
{ $('#fs' + randNumArray[i]).delay(j += 200).fadeIn(j); }

3- Al pasar el cursor sobre estas imágenes, las agrandará como se muestra a continuación:

$(function () {
            $("ul.thumb li").hover(function () {
                $(this).css({ 'z-index': '10' });
                $(this).find('img').addClass("hover").stop().animate({
                    marginTop: '-110px',
                    marginLeft: '-110px',
                    top: '50%',
                    left: '50%',
                    width: '174px',
                    height: '174px',
                    padding: '20px'
                }, 500);

            }, function () {
                $(this).css({ 'z-index': '0' });
                $(this).find('img').removeClass("hover").stop().animate({
                    marginTop: '0',
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '100px',
                    height: '100px',
                    padding: '5px'
                }, 500);
            });
        });

El problema: Si el usuario se desplaza antes de que se complete el primer conjunto de animación, las imágenes no .fadeIn() completamente, y por lo tanto son parcialmente / no visibles

Lo que yo quiero: Quiero que el tercer conjunto (al pasar el mouse para agrandar) permanezca inactivo hasta que se completen mi primer y segundo conjunto de animaciones, ¿cómo puedo hacer esto?

Muchas Gracias

preguntado el 16 de mayo de 11 a las 20:05

No lo entiendo del todo, pero parece que la capacidad de flotar no debería activarse hasta que finalice la segunda animación. En lugar de retrasarlo, use un evento para habilitar el código de desplazamiento cuando finalice la animación. -

sí, el usuario no debería poder desplazarse hasta que finalice la segunda animación. -

¿Qué tal desvincular la animación para mantenerla flotando y volver a vincularla cuando finalice la animación? -

3 Respuestas

Pon tu función Hover en una función SetTimeOut como esta

setTimeout((function () {
            $("ul.thumb li").hover(function () {
                $(this).css({ 'z-index': '10' });
                $(this).find('img').addClass("hover").stop().animate({
                    marginTop: '-110px',
                    marginLeft: '-110px',
                    top: '50%',
                    left: '50%',
                    width: '174px',
                    height: '174px',
                    padding: '20px'
                }, 500);

            }, function () {
                $(this).css({ 'z-index': '0' });
                $(this).find('img').removeClass("hover").stop().animate({
                    marginTop: '0',
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '100px',
                    height: '100px',
                    padding: '5px'
                }, 500);
            });
        }), *Put time in miliseconds*);

¡Así que esto asegurará que el desplazamiento no ocurra hasta el período de tiempo especificado!

contestado el 17 de mayo de 11 a las 01:05

¿Podría intentar llamar a la función de desplazamiento como una función de devolución de llamada en la parte posterior de la segunda animación? En términos básicos:

$("#homePageImage").fadeIn("slow", function() {

// enable hover function

});

contestado el 17 de mayo de 11 a las 00:05

¡la segunda animación está en bucle! - tpp

Ok, ¿qué tal una declaración if en el bucle que verifica si es la última iteración? Si es así, habilitará la función. - Adam Moss

¡También podría hacer 8 iteraciones y llamar a la novena por separado! - tpp

También puede mantener el bucle intacto para minimizar el código, pero un if en la última fase del bucle no debería funcionar. - Adam Moss

¿No solo quieres usar una devolución de llamada?

$('image').fadeIn('fast', function() {
  $('image').hover(function() {do stuff...});
});

contestado el 17 de mayo de 11 a las 00:05

¡la segunda animación está en bucle! - tpp

Ponlo en una función y llama a la función. - matonesb

$('image').fadeIn('fast', function() { hoveringActive();}); function hoveringActive() {$('image').hover(stuff);} - matonesb

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