CODEWITHSUNDEEP
jquery
pufAmuf
pufAmuf

Reputation: 7795

Smoothly slide bottom div Upwards when Div above dissapears

I've been messing with the fadein fadeout functions in jquery and would like to know if it's possible that the div below slides upwards instead of jumping up as soon as the div above it disappears. Here's a little jsfiddle I did :)

http://jsfiddle.net/pufamuf/2j5FU/1/

Thanks again :)

Thanks to everyone that helped me out, I really appreciate it! :)

Upvotes: 2

Views: 656

Answers (4)

Rafay
Rafay

Reputation: 31033

try using animate

$("input[type='button']").click(function() {
    switch (this.id) {
    case 'button1':
        $('#div1').fadeIn(200);
            $("#div1").animate({opacity: 1}, 2000,function(){
            $(this).slideDown();
            });
        break;
    case 'button2':
             $("#div1").animate({opacity: 0}, 2000,function(){
             $(this).slideUp();
            });
        break;
    }
});

http://jsfiddle.net/2j5FU/5/

Upvotes: 1

FishBasketGordo
FishBasketGordo

Reputation: 23132

Use slideDown and slideUp instead of fadeIn and fadeOut respectively.

http://jsfiddle.net/FishBasketGordo/H87pc/

Upvotes: 1

ckimbrell
ckimbrell

Reputation: 527

Have you tried slideUp() and slideDown() instead of fadeIn and fadeOut? That should provide the effect your looking for.

Upvotes: 1

Teneff
Teneff

Reputation: 32158

Maybe you should use .slideUp() instead of .fadeOut()

edit:

if you insist of fading out you could do it like this:

$(element).animate({opacity: 0, duration: 200}, function(){
    $(this).slideUp(100);
})

jsFiddle

Upvotes: 1

Related Questions