How to add animation moving effect to up and down sort movement.
You can check the movement by clicking on the UP and DOWN text links.
Here is my code
$(document).ready(function(){
$('.move-up').click(function(){
if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
});
$('.move-down').click(function(){
if ($(this).next())
$(this).parent().insertAfter($(this).parent().next());
});
});
Maybe something like this could help you : http://jsfiddle.net/eJk3R/38/
It's far from perfect, you'll need to clean up the code a little bit and test the presence of an element before and after a little better before fireing the animation.
I also added
position: relative;
to thespan
style.just add the a sequence of hide and show, easy!
I met the same demand here, to add move animation for item list. I first want to use jquery
animate
to do this. But I'm usingtable
andtr
as list and list item, and I find animations are not supported on table rows after some search (You can check this link to read more about this). So I managed to use other solutions. Finally I made it out by using CSS3 transform and transition.Here is the code:
Here is jsfiddle: DEMO
This code was work for me 100%. The code pen url here https://codepen.io/dineshnisshanka/pen/KKPzXJB
Use
.animate
to generate the animation.For instance,
I hope this is what you are looking for -> DEMO