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 trie

Answer 1

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 0.5s' };
   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.