随着Div浮动向左移动动画位置

Question

I have a bunch of divs that live inside a container. When a user clicks on one of them they are removed and a divs below that one slide over to fill the space it left because they are set to float:left like this jsFiddle . I want the divs to animate as they move over to fill the space. Is there a CSS or jQuery function to automatically do that, or would I have to calculate the position each div is currently in and then call some kind of animateAll() to move them to the position that they will be?

Answer 1

Add $(this).addClass('hide').fadeOut(500, function() { $(this).remove(); }); to hide and remove that child after transition

demo:-

 $("div").click(function(){ $(this).addClass('hide').fadeOut(500, function() { $(this).remove(); }); }); 

 div { float:left; height:20px; width:20px; margin:5px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } div:hover { cursor:pointer; } .hide { width: 0; height: 0; opacity: 0; margin: 0; padding: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="background:red;"></div> <div style="background:orange;"></div> <div style="background:yellow;"></div> <div style="background:green;"></div> <div style="background:blue;"></div> <div style="background:purple;"></div> 

Check this fiddle

Answer 2

Please check this script.

    $("div").click(function(){
$(this).css('opacity',0).animate({
    width: 0,
  }, 1000, function() {
    $(this).remove();
  });
});

Answer 3

try this

 $("#divname").click(function(){
    $("div").animate({"width":"0px"}, "slow",function() {
     $(this).remove();
  });
 });

Answer 4

you can use jquery animate

 $("div").click(function(){
        $(this).remove();
        $("div").animate({"left":"0px"}, "slow")
    });