javascript - 要素を非表示にした後にフローティング div をスライドする

Question

divs左に浮かんでいる4列があります。クリックすると、div が消え、その兄弟が左に移動してその位置を占めます。ただし、残りの「div」はスライドするのではなく、新しい位置にジャンプするだけなので、このアニメーションをスムーズにするのに苦労しています

http://jsfiddle.net/G9x8V/

できれば特定の値を使用せずに、移行をスムーズにする方法はありますmargin-left: x pixels;か? また、CSSトランジションでこれを行うことは可能ですか?

Answer 1

fadeOut()で切り替えることができますhide()

これが更新されたフィドルです

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

     })
});

編集

方向の 1 つは、ボックスがフェードアウトした後に非表示になる非表示の div にボックスをラップすることです。これが更新されたフィドルです

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

    });
});

Answer 2

これはあなたが探しているものですか？それとも、実際にブロックをスライドさせたいですか?

CSS3の使いやすさ

-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