jQuery Plugin For Self Healing Transition

jQuery Plugin For Self Healing Transition
File Size: 5.64KB
Views Total: 442
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.