fadeto - jquery css opacity animate

¿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 selecciona 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

Aquí está mi solución, puedes usarla como 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));

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

// 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.

Originalmente fue publicado en mi blog .

Answer 2

Es posible ahora usar 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 3

La solución más moderna es usar los valores de ''show'' y ''hide'' cuando desee 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>

Answer 4

Use animate() lugar de fadeIn() :

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

Answer 5

comience con height:0px y opacity:0; filter: alpha(opacity = 0) opacity:0; filter: alpha(opacity = 0) luego en la acción do:

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

Cambia la altura (configuré a 200) y la duración (configuré a 350) a lo que quieras.

Answer 6

$(''.target'')                    
    .hide()  
    .slideDown(500, ''swing'')  
    .css(''opacity'', 0)  
    .animate({opacity: 1}, {queue: false, duration: 1000});

Answer 7

        $(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 buscas. Por favor, eche un vistazo al ejemplo también: http://jsfiddle.net/oddacon/M44md/