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

Question

I found jQuery: FadeOut, then SlideUp , and this is good, but it is not the one.

How can I fadeOut() and slideUp() at the same time? I tried two different calls to setTimeout() with the same delay, but slideUp() happened right after the page loaded.

Has anyone done this?

Answer 1

You can do something like this, this is the full version for switching:

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

For severe attenuation:

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

Answer 2

Direct height animations cause sudden movements on some web pages. However, combining CSS transition with jQuery slideUp() provides a smooth fade.

 const slideFade = (elem) => { const fade = { opacity: 0, transition: 'opacity 0.5s' }; elem.css(fade).slideUp(); } slideFade($('#mySelector')); 

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

In some situations, a very fast 100 millisecond pause for greater attenuation creates a slightly smoother impression:

  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 switching support and callbacks.

Answer 3

The accepted answer "Nick Craver" is definitely the way to go. The only thing I would add is that his answer didn't actually “hide” it, and the DOM still sees a viable element in it for display.

This can be a problem if you have margins or indents on the slid ... they will still be displayed. So I just added the animate () function callback to hide it after the animation is complete:

 $("#mySelector").animate({ height: 0, opacity: 0, margin: 0, padding: 0 }, 'slow', function(){ $(this).hide(); }); 

Answer 4

This can be done using slideUp and fadeOut as follows:

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

Answer 5

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 animation queues need to be played or just play it right now

Answer 6

Throwing another tweak based on @CodeKoalas. It takes into account the vertical margin and margins, but not horizontal.

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