Sample of Deferred Object - Promise object for action

Sample of Deferred Object - Promise object for action

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    height: 10px; width: 0;
    margin: 1px;
    background-color: #386c9d;
}

JavaScript

var effect = function() {
    $("div").each(function(i) {
        var duration = 1000 + 100 * (i - 2);
        $(this).animate({
            width: '300px'
        }, duration, 'swing').animate({
            width: '0'
        }, duration, 'swing');
    });
    return $("div").promise();
};

$("button").bind("click", function() {
    $("p").append(" Started... ");

    $.when(effect()).done(function() {
        $("p").append(" Finished! ");
    });
});