CODEWITHSUNDEEP
jqueryfadeoutslideup
Kenny Bones
Kenny Bones

Reputation: 5139

jQuery fadeOut and SlideUp, then fadeIn and SlideDown

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

Upvotes: 2

Views: 7675

Answers (1)

Allende
Allende

Reputation: 1482

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 .

Upvotes: 7

Related Questions