Looking to enhance the sorting functionality of divs using jQuery by incorporating CSS3 transition animations for smoother transitions.
Encountering an issue where the CSS3 transition animation is not functioning as expected, currently investigating the root cause:
Example for reference: jsFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Sort with Animation</title>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' type='text/css' media='screen' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript' src='http://code.jquery.com/ui/1.9.2/jquery-ui.js'></script>
<style>
.gallery {
background-color: black;
}
.imgitem {
width: 40px;
height: 40px;
background-color: blue;
margin-bottom: 10px;
overflow: hidden;
background-color: blue;
position: relative;
}
.imgitem {
-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;
}
</style>
</head>
<body>
<button id="chrank">Sort Items</button>
<div class="gallery">
<div class="imgitem" style="background-color: red;"><div class="pop">6</div></div>
<div class="imgitem" style="background-color: blue;"><div class="pop">4</div></div>
<div class="imgitem" style="background-color: green;"><div class="pop">8</div></div>
<div class="imgitem" style="background-color: brown;"><div class="pop">1</div></div>
<div class="imgitem" style="background-color: magenta;"><div class="pop">3</div></div>
<div class="imgitem" style="background-color: grey;"><div class="pop">5</div></div>
<div class="imgitem" style="background-color: pink;"><div class="pop">4</div></div>
<div class="imgitem" style="background-color: navy;"><div class="pop">7</div></div>
<div class="imgitem" style="background-color: yellow;"><div class="pop">9</div></div>
</div>
<script>
$('.gallery').sortable({ disable: true });
function doSort()
{
$('.gallery').sortable({ disable: true });
$('.gallery').sortable('refresh');
$('.gallery .imgitem').sort(sortAscending).appendTo('.gallery');
}
function sortAscending(a, b) {
return $(a).find(".pop").text() > $(b).find(".pop").text() ? 1 : -1;
};
$("#chrank").live("click", function(){
doSort();
});
</script>
</body>
</html>