How to run jQuery fadeIn () and slideDown () at the same time?

Question

I have a div with a display: none; Now I want to show it using both: fadeIn and slideDown.

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

The diversion is selected correctly. But when I launch the effect, all it does is slideDown. And if I just delete slideDown, I can see fadeIn, so there is nothing wrong with the syntax. But why does this not cause both animations?

Answer 1

Use animate() instead of fadeIn() :

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

Answer 2

Here is my solution, you can use it as a jQuery plugin.

 (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)); 

Now you can use it the same way you would use the jQuerys.fadeIn (or fadeOut) effect.

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

This will resize our height with the fading effect.

It was originally published on my blog .

Answer 3

start with height:0px and opacity:0; filter: alpha(opacity = 0) opacity:0; filter: alpha(opacity = 0) , and then do the action:

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

Change the height (i is set to 200) and the duration (i is set to 350) according to what you want.

Answer 4

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

it's for fading out, but I think it's yours. please also look at an example: http://jsfiddle.net/oddacon/M44md/

Answer 5

Now you can use CSS3 transitions. This allows for very flexible solutions.

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

A more modern solution is to use the values ​​of 'show' and 'hide' if you want to combine animations:

 $('.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>