Check out the red and green boxes on this JSFiddle. Clicking the 'click me' button makes the red boxes fade out using jQuery's fadeOut method, while the green boxes jump to their new position.
I'm looking for a way to make the green boxes move smoothly to their new spot. I've tried adding CSS transitions like this:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
However, this causes the jQuery fadeOut function to stop working.
Take a look at the code in the JSFiddle:
HTML
<div id="clickme">Click me</div>
<ul>
<li><div class='a'></div></li>
<li><div class='a'></div></li>
<li><div class='a'></div></li>
<li><div class='b'></div></li>
<li><div class='a'></div></li>
<li><div class='a'></div></li>
<li><div class='b'></div></li>
<li><div class='a'></div></li>
<li><div class='a'></div></li>
<li><div class='a'></div></li>
<li><div class='b'></div></li>
<li><div class='a'></div></li>
<li><div class='b'></div></li>
</ul>
Jquery
$(document).ready(function(){
$("#clickme").click(function(){
$('.a').fadeOut(1000);
});
});
CSS
li{
list-style-type: none;
float: left;
}
li div{
margin: 20px;
height: 100px;
width: 100px;
}
li div.a{
background-color: red;
}
li div.b{
background-color: green;
}
#clickme{
background-color: blue;
text-align: center;
color: #FFF;
cursor: pointer;
}
}