CODEWITHSUNDEEP
jquerycsshtmltransition
AspiringCanadian
AspiringCanadian

Reputation: 1665

Move adjacent divs smoothly when a div hides

Fiddle link

When I click on the green div, everything hides, but the green div is jerky, as in, it comes right next to the first green div with a jerky motion. Is it possible to smooth transit, so that it slides and takes its places right next to the first green div?

JS:

$('.green').click(function(){
    $('.others').fadeOut();
});

CSS:

.green{ background:green; padding:10px; margin:10px; }
.red{ background:red; padding:10px; margin:10px; }
.blue{ background:blue; padding:10px; margin:10px; }
.green:hover{ cursor:pointer;}
.fade{display:none; opacity:0;}
div{ float:left; }

HTML:

<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>
<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>

Upvotes: 8

Views: 4769

Answers (4)

Geeky Ninja
Geeky Ninja

Reputation: 6050

You can try this:

$('.green').click(function(){
    $('.others').fadeOut("slow");
});

OR

this:$('.green').click(function(){ $('.others').hide("literal"); });

Upvotes: 0

demonofthemist
demonofthemist

Reputation: 4199

The trick is to remove opacity & size, then hide it.

$('.green').click(function(){
    $('.others').animate({'opacity':0},200,function(){
        $(this).animate({'width':0},200,function(){
            $(this).hide();
        });
    });
});

If you divs are below each other you can animate height to zero(0).

Upvotes: 1

waplet
waplet

Reputation: 151

$('.green').click(function(){
    $('.others').animate({
        "margin-left":0,
        "margin-right":0,
        "padding-left":0,
        "padding-right":0,
        width:0,
    }, 300);
});

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

Do animation, clear just margins and paddings, and animate width to 0, so adjecent divs move along

Upvotes: 1

Fizor
Fizor

Reputation: 1530

Perhaps you could switch your fadeout() with hide()

$('.green').click(function(){
$('.others').hide(300);


});

Here is your fiddle updated.

Upvotes: 11

Related Questions