64

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.

How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.

Has anyone done this?

6 Answers 6

111

You can do something like this, this is a full toggle version:

$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');

For strictly a fadeout:

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
1
  • @Powerlord - Woops you're right, was testing the showing here, doh Mar 5, 2010 at 15:43
24

Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.

const slideFade = (elem) => {
   const fade = { opacity: 0, transition: 'opacity 400ms' };
   elem.css(fade).slideUp();
   };

slideFade($('#mySelector'));

Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435

bye

In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:

   elem.css(fade).delay(100).slideUp();

This is the solution I used in the dna-engine project where you can view the code (github.com/dna-engine/dna-engine) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.

1
  • 1
    Thanks. Nick Craver's accepted answer did not work for me for the reason mentioned in CodeKoalas's answer. However, I prefer your code because it lets you set different timings for the fade and opacity effects. (E.g., I like the look when you set fade a little faster than the slideup.) However, I'm not sure about your smoothness claim. On my computer, the effect produced by your code is smooth in IE but not particularly so in Chrome.
    – Atlas
    Mar 30, 2016 at 21:10
14

The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.

This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:

$("#mySelector").animate({ 
   height: 0, 
   opacity: 0,
   margin: 0,
   padding: 0
}, 'slow', function(){
   $(this).hide();
});
1
  • This one works better! I changed to marginTop/Bottom and paddingTop/Bottom to make it look nicer.
    – Lukman
    May 28, 2020 at 5:47
4

It's possible to do this with the slideUp and fadeOut methods themselves like so:

$('#mydiv').slideUp(300, function(){
    console.log('Done!');
}).fadeOut({
    duration: 300,
    queue: false
});
2

I had a similar problem and fixed it like this.

$('#mydiv').animate({
            height: 0,
        }, {
            duration: 1000,
            complete: function(){$('#mydiv').css('display', 'none');}
        });
$('#mydiv').animate({
            opacity: 0,
        }, {
            duration: 1000,
            queue: false
        });

the queue property tells it whether to queue the animation or just play it right away

2

Throwing one more refinement in there based on @CodeKoalas. It accounts for vertical margin and padding but not horizontal.

$('.selector').animate({
    opacity: 0,
    height: 0,
    marginTop: 0,
    marginBottom: 0,
    paddingTop: 0,
    paddingBottom: 0
}, 'slow', function() {
    $(this).hide();
});

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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.