Comment exécuter jQuery fadeIn () et slideDown () simultanément?

Question

J'ai un div avec display: aucun; Maintenant, je veux le montrer en utilisant simultanément fadeIn et slideDown.

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

Le div est sélectionné correctement. Mais lorsque je déclenche l'effet, il ne fait que glisser. Et si je supprime simplement le slideDown, je peux voir le fadeIn, il n’ya donc aucun problème avec la syntaxe. Mais pourquoi ne déclenche-t-il pas les deux animations?

Answer 1

Utilisez animate() au lieu de fadeIn() :

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

Answer 2

commencez par height:0px et opacity:0; filter: alpha(opacity = 0) puis sur l'action faites:

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

Changez la hauteur (je règle à 200) et la durée (je règle à 350) en tout ce que vous voulez.

Answer 3

Voici ma solution, vous pouvez l’utiliser comme un plugin 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));
 

Vous pouvez maintenant l'utiliser de la même manière que vous utiliseriez l'effet .fadeIn (ou fadeOut) de jQuery.

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

Cela redimensionnera la hauteur de notre élément avec un effet de fondu.

Il a été initialement publié sur mon 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");
        });
    });
 

c'est pour un fondu mais je pense que c'est ce que vous voulez. Regardez aussi l'exemple: http://jsfiddle.net/oddacon/M44md/