51

I've got a div with display: none; Now I want to show it using both: fadeIn and slideDown simultaneously.

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

The div is selected properly. But when I trigger the effect, all it does is the slideDown. And if I just delete the slideDown I can see the fadeIn, so there is nothing wrong with the syntax. But why doesn't it trigger both animations?

3
  • I've been trying to work this out for a bit. I haven't got the 'right' answer but this may help you: $('bla').slideDown basically maps to this in the source: $('bla').animate({ height: 'show', paddingTop: 'show', paddingBottom: 'show', marginTop: 'show', marginBottom: 'show' }. So you can put that and animate will act just like a slideDown.
    – Brandon
    Aug 22, 2011 at 21:41
  • @iWebaholic: please select the correct anser
    – Adriano
    Jun 23, 2014 at 11:09
  • Please select @pbierre 's answer as the accepted answer. Good solution.
    – earl3s
    Jul 13, 2016 at 18:27

7 Answers 7

157

Use animate() instead of fadeIn():

$(this)
  .css('opacity', 0)
  .slideDown('slow')
  .animate(
    { opacity: 1 },
    { queue: false, duration: 'slow' }
  );
4
  • 11
    This answer should be selected as the correct one! Works perfectly. Thanks! Jan 21, 2013 at 16:58
  • 1
    Yup... this is the right answer. However, I prefer "fast" over "slow" animation, as even little delays in UI responsiveness can irritate users. Aug 6, 2015 at 2:56
  • 1
    Perhaps more of an explanation as to why they cannot both be run at once? Not sure why this hasn't been chosen as the correct answer yet however.
    – Andrew Ice
    Jan 20, 2017 at 18:29
  • Really nice solution. Should be selected as correct.
    – glln
    Feb 16, 2017 at 14:42
5

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

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

Change the height (i set to 200) and the duration (i set to 350) to whatever you want.

5

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 jQuery’s .fadeIn (or fadeOut) effect.

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

This will resize our element’s height with a fading effect.

It was originally posted on my blog.

2
  • +1 very nice. I removed the .css('opacity', 0) and .css('opacity', 1) because when I wanted to hideUp while the object was still showDowning the opacity would go straight to 1 before it tries to hide.
    – RoLYroLLs
    Jul 15, 2013 at 17:13
  • 1
    I think both functions should return $(this)... to allow method chaining.
    – Paul
    May 23, 2017 at 10:40
4
$('.target')                    
    .hide()  
    .slideDown(500, 'swing')  
    .css('opacity', 0)  
    .animate({opacity: 1}, {queue: false, duration: 1000});
1
  • Your answer will be better if you explain the code and how it solves the question
    – Nic3500
    Jul 27, 2018 at 0:08
3

The more modern solution is to use values of 'show' and 'hide' when 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>

1
  • Exactly what I needed, thank you! I've added , "slow" to the end of the curly bracket to make it smoother.
    – iorgv
    Feb 18, 2018 at 12:18
1
        $(document).ready(function() {
    $("#test").bind("click", function() {
            setTimeout(function() {
            $('#slidedown').slideDown("slow");
        }, 500);
        $("#content").fadeOut(500);
        $(this).stop().animate({ "opacity": "1" }, "slow");
        });
    });

this is for fade out but i think it's what your after. please have a look at the example too: http://jsfiddle.net/oddacon/M44md/

0

It's possible now to use CSS3 transitions. It allows to achieve 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');
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.