jQuery fadeOut and SlideUp, then fadeIn and SlideDown

Question

I have this function where I change the content of a div. And I want to fadeOut and slideUp at the same time, then change the contents. Then fadeIn and SlideDown. It's really nothing wrong with the way it looks as of now. It's just not fading out and in. I'm just curious how to do this. I could add and remove classes, that affect the opacity I guess. But I'd like to know if this is possible using jQuery alone.

function swiperGetNew(title, moh, text) {   
    $('#frontpage_blog-swiper_info').find('article').slideUp(function() {
        $(this).find('h2').text(title);
        $(this).find('h3').text(moh);
        $(this).find('p').text(text);
        $(this).slideDown();
    })
}

I've tried to do .animate, but I can't get my head around it. And I've thought that this ought to work, but it doesn't.

$('#frontpage_blog-swiper_info').find('article').slideUp();
$('#frontpage_blog-swiper_info').find('article').fadeOut(function() {
    $(this).find('h2').text(title);
    $(this).find('h3').text(moh);
    $(this).find('p').text(text);
    $(this).fadeIn();
    $(this).slideDown();
})

Answer 1

Try

$(this).animate({opacity: 'hide', height: 'hide'}, 'slow');

http://jsfiddle.net/tmunr/

Note: in case you need it the animation to make it appear will be:

$('#myDiv').animate({opacity: 'show', height: 'show'}, 'slow');

If you want one effect start after the other ends try using a callback:

$('#element').fadeOut('slow',function(){
     $(this).slideUp('fast');
}); 

But don't think that look nice .