fadeOut() and slideUp() at the same time?

Question

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?

Answer 1

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

Answer 2

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

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.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.