Timothy Fisher Timothy Fisher - 1 month ago 8
CSS Question

Use jQuery to animate the re-position of DIV's after fadeOut (fiddle)?

To get a better idea of what I'm trying to do, I have this fiddle:

https://jsfiddle.net/tfisher9180/7efagjhj/1/

When you click the button 3 squares fade out, and then afterwards the orange square immediately snaps up because of the absence of the others.

I want to know if there's a way to animate that to look more fluid so that the orange box slides up as well.

.square {transition: all 0.3s linear;}


This did not work as I expected.

UPDATE:

Marking @anied as correct answer for working with me a bit and helping to fix positioning. Everyone's solutions were awesome though and worked nicely. +1 for all and will have to try out a few to see which looks best!!!

Answer

So, the problem with using a CSS transition here is that there is no CSS property of the orange box that is changing when the boxes around it disappear-- it is simply reflowing to the new position in the DOM based on the change the display property of these other boxes. I think if you want this to work you will have to write a custom bit of jQuery code that fades the boxes out but doesn't immediately hide them, but instead slides them up and out of sight.

Try something like this:

$('#sort').on('click', function() {
  $('.square').each(function() {
    if (!$(this).hasClass('square-orange')) {
      $(this).animate({'opacity' : 0}, 400, 'swing', function () {
          $(this).slideUp();
      });
    }
  });
});

edit: Regarding the skip-- not really sure exactly, but I tried replacing the slideUp with a custom replacement and it seemed to resolve it:

$('#sort').on('click', function() {
  $('.square').each(function() {
        if (!$(this).hasClass('square-orange')) {
        $(this).animate({'opacity': 0}, 400, 'swing', function() {
            $(this).animate({'height': 0}, 400, 'swing');
      });
    }
  });
});

edit (again): actually, looking now I see that one problem is that the top .row still is retaining height after the boxes within slide-up.... you might need to slide that up as well, depending on your requirements..

edit:

OK, last time, fixed your positioning a bit-- I think this works:

$('#sort').on('click', function() {
  $('.square').each(function() {
		if (!$(this).hasClass('square-orange')) {
    	$(this).animate({'opacity': 0}, 400, 'swing', function() {
      	$(this).animate({'height' : 0}, 400, 'swing');
      });
    }
  });
});
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  display: block;
  clear: both;
}
.square {
  width: 60px;
  height: 60px;
  display: block;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.square-red {
  background-color: red;
}

.square-blue {
  background-color: blue;
}

.square-orange {
  background-color: orange;
}

.square-purple {
  background-color: purple;
}

#sort {
  margin-top: 30px;
  background-color: #414141;
  border: 0;
  color: #f2f2f2;
  padding: 10px 15px;
  cursor: pointer;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row row-top clearfix">
    <div class="square square-red"></div>
    <div class="square square-blue"></div>
  </div>
  <div class="row row-bottom clearfix">
    <div class="square square-orange"></div>
    <div class="square square-purple"></div>
  </div>
</div>

<button id="sort">Sort Orange</button>

Comments