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

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

Solution 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

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.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.

Solution 3:

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();
});

Solution 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
});

Solution 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 to queue the animation or just play it right away