CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cat-t
cat-t

Reputation: 1376

Slide floated divs after hiding an element

I have a row of 4 divs that are floated left. On click, the div disappears and its siblings move to the left and take up its position. However, I'm struggling with smoothing this animation since the remaining 'divs' just jump to their new position instead of sliding over

http://jsfiddle.net/G9x8V/

Is there any way to smooth out the transition, preferably without using specific values, ie: margin-left: x pixels;? Also, is it possible to do this with css transitions?

Upvotes: 3

Views: 1169

Answers (3)

Josh Powell
Josh Powell

Reputation: 6297

Is this what you are looking for? Or do you actually want the blocks to slide along?

CSS3 Ease

-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;

JSFIDDLE

jQuery

$(function(){
  $('.box').on('click', function(){
      $(this).fadeOut(function() {
          $(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000); 
      });
  })
});

JSFIDDLE jQuery

Upvotes: 0

Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

You can switch fadeOut() with hide()

Here is the updated fiddle

$(function(){
    $('.box').on('click', function(){
        $(this).hide(1000);

     })
});

EDIT

One of the directions is to wrap boxes into invisible divs that will hide after the boxes fade out. Here is the updated fidle

HTML

<div class="container">
<div class="outer-box">
    <div class="box">1</div>
</div>
<div class="outer-box">
    <div class="box">2</div>
</div>
<div class="outer-box">
    <div class="box">3</div>
</div>
<div class="outer-box">
    <div class="box">4</div>
</div>
</div>

CSS

.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}

.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}

jQuery

$(function(){
    $('.box').on('click', function(){
        $(this).fadeOut(1000, function(){
            $(this).parents('.outer-box').hide(1000);
        });

    });
});

Upvotes: 3

James G.
James G.

Reputation: 2904

I'd go with Bojana's answer, but I'll give you another option, as I worked a little on it(it's not done, implementation isn't as easy as bojana's):

http://jsfiddle.net/G9x8V/4/

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {margin-left: 18%;}
25%  {margin-left: 12%;}
50%  {margin-left: 6%;}
100% {margin-left: 0%;}
}

And then you'd have to update the javascript so it occured on click, not on page load, and you might want to put in more points on that animation and switch to px.

Upvotes: 1

Related Questions