jQuery Plugin For Self Healing Transition

A jQuery plugin inspired by Self Healing Transition from Yahoo! Design Pattern Library that allows you to gently add or remove items from the DOM with transition effects.

How to use it:

1.  Markup

<ul>
<li>Pronounced</li>
<li>Second Helping</li>
<li>Nuthin' Fancy</li>
<li>Gimme Back My Bullets</li>
<li>Street Survivors</li>
<li>The Last Rebel</li>
<li>God & Guns</li>
<li>Last of a Dyin' Breed</li>
</ul>
<button id="undo">Undo</button>
<button id="add">Add</button>

3. Include jQuery and selfheal.js

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="src/jquery.selfheal.js" type="text/javascript"></script> 

4. Call the plugin

<script>
var counter = 0;

$(document).ready(function () {
    var history = [];

    $('ul').on('click', 'li', function () {
        history.push(this);
        $(this).selfheal();
    })

    $('button#undo').click(function () {
        var el = history.pop();

        $(el).selfheal();
    })

    $('button#add').click(function () {
        var random = Math.floor(Math.random() * $("li").length)
        var el = $("<li/>").text("jQueryScript.Net #" + ++counter);
        var place = $("li").eq(random);

        el.insertAfter(place).hide().selfheal({ duration: 200 });
    })
})
</script>

---

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