Minimal jQuery Plugin For Transitions Between DOM States - Magic Move

Magic Move is a lightweight jQuery plugin that makes it easier to do animations and transitions between DOM states, with easing function support.

Example:

1. Load the jQuery javascript library and jQuery magic move plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.magicmove.js"></script>

2. Create a group of div blocks you want to move.

<article class="containers">
<section class="first">1st</section>
<section class="second">2nd</section>
<section class="third">3rd</section>
</article>

3. Create a trigger button to start the animation.

<button class="animate">Animate</button>

4. The javascript.

<script>
jQuery(function($){
$('button.animate').click(function(){
$('.containers').magicMove({easing: 'ease', duration: 300}, function(){
var index = $(this).children().length + 1;
var $el = $('<section>' + index + 'th</section>');
$(this).find('.second').after($el);
});
});
});
</script>

---

This awesome jQuery plugin is developed by maccman. For more Advanced Usages, please check the demo page or visit the official website.