¿Cómo ejecutar jQuery fadeIn() y slideDown() simultáneamente?

Question

Tengo un div con pantalla: ninguno; Ahora quiero mostrarlo usando ambos: fadeIn y slideDown simultáneamente.

$(this).slideDown({duration: 'slow', queue: false}); 
$(this).fadeIn({duration: 'slow', queue: false}); 

El div se ha seleccionado correctamente. Pero cuando disparo el efecto, todo lo que hace es slideDown. Y si simplemente elimino el slideDown puedo ver el fadeIn, entonces no hay nada de malo con la sintaxis. ¿Pero por qué no activa ambas animaciones?

Answer 1

comienzo con height:0px y opacity:0; filter: alpha(opacity = 0) entonces la acción de hacer:

$(this).stop().animate({ 
    height: 200, 
    opacity: 1 
}, 350); 

cambiar la altura (me puse a 200) y la duración (me puse a 350) a lo que quieras.

Answer 2

Uso animate() en lugar de fadeIn():

$(this) 
    .css('opacity', 0) 
    .slideDown('slow') 
    .animate(
    { opacity: 1 }, 
    { queue: false, duration: 'slow' } 
); 

Answer 3

Aquí está mi solución, que se puede utilizar como un plugin de jQuery.

(function($) { 
    'use strict'; 
    // Sort us out with the options parameters 
    var getAnimOpts = function (a, b, c) { 
      if (!a) { return {duration: 'normal'}; } 
      if (!!c) { return {duration: a, easing: b, complete: c}; } 
      if (!!b) { return {duration: a, complete: b}; } 
      if (typeof a === 'object') { return a; } 
      return { duration: a }; 
     }, 
     getUnqueuedOpts = function (opts) { 
      return { 
       queue: false, 
       duration: opts.duration, 
       easing: opts.easing 
      }; 
     }; 
    // Declare our new effects 
    $.fn.showDown = function (a, b, c) { 
     var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts); 
     $(this).hide().css('opacity', 0).slideDown(slideOpts).animate({ opacity: 1 }, fadeOpts); 
    }; 
    $.fn.hideUp = function (a, b, c) { 
     var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts); 
     $(this).show().css('opacity', 1).slideUp(slideOpts).animate({ opacity: 0 }, fadeOpts); 
    }; 
}(jQuery)); 

Ahora usted puede usarlo de la misma manera que utilizaría efecto de jQuery .fadeIn (o fadeOut).

// Show 
$('.alert').showDown('slow'); 
// Hide 
$('.alert').hideUp('fast', function() { 
    // Animation complete: '.alert' is now hidden 
}); 

Esto cambiará el tamaño de la altura de nuestro elemento con un efecto de desvanecimiento.

Era originally posted on my blog.

Answer 4

 $(document).ready(function() { 
    $("#test").bind("click", function() { 
      setTimeout(function() { 
      $('#slidedown').slideDown("slow"); 
     }, 500); 
     $("#content").fadeOut(500); 
     $(this).stop().animate({ "opacity": "1" }, "slow"); 
     }); 
    }); 

esto es para desvanecerse, pero creo que es lo que su después. Por favor, eche un vistazo al ejemplo también: http://jsfiddle.net/oddacon/M44md/

Answer 5

Ahora es posible usar las transiciones CSS3. Permite lograr soluciones muy flexibles.

HTML

<div id="btn">Click me</div> 
<div id="hidden"></div> 

CSS

#hidden { 
    display: none; opacity: 0; height: 100px; background: red; 
    transition: opacity 600ms ease-in-out 0s; 
} 
#hidden.opened { 
    opacity: 1; 
} 

jQuery

$('#btn').click(function() { 
    var div = $('#hidden'); 
    if (! div.is(':animated')) { 
     div.slideToggle(600).toggleClass('opened'); 
    } 
}); 

Answer 6

La solución más moderno es el uso de valores de 'show' y 'hide' cuando se quiere combinar animaciones:

$('.show').on('click', function() { 
 
    $('.example').animate({ 
 
    opacity: 'show', 
 
    height: 'show', 
 
    marginTop: 'show', 
 
    marginBottom: 'show', 
 
    paddingTop: 'show', 
 
    paddingBottom: 'show' 
 
    }) 
 
}) 
 
$('.hide').on('click', function() { 
 
    $('.example').animate({ 
 
    opacity: 'hide', 
 
    height: 'hide', 
 
    marginTop: 'hide', 
 
    marginBottom: 'hide', 
 
    paddingTop: 'hide', 
 
    paddingBottom: 'hide' 
 
    }) 
 
})

.example { 
 
    background-color: blue; 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <button type="button" class="show">Show</button> 
 
    <button type="button" class="hide">Hide</button> 
 
</p> 
 
<div class="example"></div>