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/