问题描述:

I have several blocks of content. I slide one off to the side, then remove it. Once that is done, I want the blocks below it to slide up and take its place.

JSFiddle Example

HTML

<div id="container">

<div id="elem1" class="item one">

Element 1

</div>

<div id="elem2" class="item two">

Element 2

</div>

<div id="elem3" class="item three">

Element 3

</div>

</div>

CSS

.one {

background-color: red;

}

.two {

background-color: blue;

}

.three {

background-color: green;

}

.item {

height: 150px;

width: 200px;

margin-bottom: 20px;

}

.closed {

-webkit-transition: all .75s ease;

-moz-transition: all .75s ease;

-o-transition: all .75s ease;

transition: all .75s ease;

background-color: yellow;

margin-left: 200px;

opacity: 0;

}

Javascript/JQuery

$('.item').on('click', function(){

$(this)

.addClass('closed')

.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){

$(this).remove();

});

});

What transition can I uses so that if I click the red block, once it is removed the blue and green blocks will slide into place?

网友答案:

Working Fiddle

Give a try to this;

$(this).height(0).css({'margin':'0'});

or Probably this;

$(this).css({'margin':'0','height':'0'}); 

good luck!

网友答案:

You can use .animate() with time and adjust top or margin-top to move the element out of view. Once out you can remove the element and reset the top / margin-top to its original value.

网友答案:

You can animate with height and margin equal to 0

$('.item').on('click', function(){
  var obj = $(this);
  $(this)
   .addClass('closed')
   .on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){
      obj.animate({ height: 0, margin : 0 }, 0);
   });
});

Here is the fiddle link DEMO

相关阅读:
Top