Fundido de entrada y movimiento

Quiero que div simple se desvanezca y se mueva simultáneamente. Supongamos que hay una imagen oculta en la parte superior y cuando hago clic en un botón, la imagen debe aparecer en el centro de la página con efecto de desvanecimiento.Fundido de entrada y movimiento

pero para mí que se desvanece en primer lugar y luego comienza a moverse ...

 $('#shelf').fadeIn('fast').animate({ 
      'bottom': '54%' 
      }, 'slow', function() { 
      // Animation complete. 
     });

Fuente

2011-07-25 FlintOff

probar este

$('#shelf').fadeIn('fast').animate({ 
      'bottom': '54%' 
      }, {duration: 'slow', queue: false}, function() { 
      // Animation complete. 
     });

Fuente

2011-07-25 14:59:05 ShankarSangoli

@Mr. Flint - Acepta esta respuesta si te ayudó gracias. – ShankarSangoli

Acepté su respuesta. Gracias por tu ayuda. – FlintOff

queue: false is slick. Gracias por el consejo. – earl3s

Uso:

$('#shelf').animate({ 
     'bottom': '54%', 
     'opacity': 1 
     }, 'slow', function() { 
     // Animation complete. 
});

Fuente

2011-07-25 14:58:44 Darm

'#Shelf' se oculta en un principio. Entonces necesito desvanecerlo primero. De todos modos gracias por tu respuesta. Hice un voto positivo para usted – FlintOff

jQuery cadenas de eventos, por lo que piensa: "Complete fadeIn, y luego hacer esta animación "

Si incluye el fundido en el código (como: opacity: 100%;) en la animación, hará todo a la vez.

Fuente

2011-07-25 14:59:04 rockerest

No, no piensa así, la función animada no está en la función de devolución de llamada de "fadeIn". Si no se ejecuta simultáneamente, porque fadeIn internamente está usando animate y entonces hay un orden de cola de evento fx. – Darm

-2

porque pones fadeIn() por primera vez en la cadena. Intente separar las dos en dos llamadas separadas:

$('#shelf').fadeIn('fast'); 

    $('#shelf').animate({ 
     'bottom': '54%' 
     }, 'slow', function() { 
     // Animation complete. 
    });

Fuente

2011-07-25 14:59:27 Kon

Eso es lo mismo que él tiene. La animación no espera a que fadeIn termine, solo si lo hiciera, eso importaría: '$ ('# shelf'). FadeIn ('fast', function() {$ (this) .animate ({'bottom' : '54% '},' lento ');}); ' –

-3

Bueno, lo tiene desvanecimiento rápido, pero lento. Ambos comienzan al mismo tiempo, pero notan el desvanecimiento primero.

Haga que ambos sean iguales y que ambos aparecerán al mismo tiempo.

Fuente

2011-07-25 15:00:29

jQuery encadena los eventos y los ejecuta en orden, por lo que el desvanecimiento ocurre antes de la animación.

Aquí hay un ejemplo que usa la propiedad de transición CSS3 para encargarse de la animación.

http://jsfiddle.net/jdmiller82/UMVnD/

Fuente

2011-07-25 15:04:28

Respuesta

Cuestiones relacionadas