Practice JQuery Promise

by Akram kamal

HTML

<div class="box1"></div>
<div class="box2"></div>

CSS

.box1 {background: blue;width: 100px; height:100px;position: absolute; top: 0; left: 0;}
.box2 {background: red;width: 100px; height:100px;position: absolute; top: 200px; left: 0;}

JavaScript

//https://www.youtube.com/watch?v=j8O3roujDTg
$(function(){
    function animateBox() {
        var deferred = $.Deferred();
        $(".box1").animate({left:"300px"}, 4000, function() {
            deferred.resolve();
        }); 
        $(".box2").animate({left:"600px"}, 8000, function() {
            deferred.resolve();
        });        
        return deferred.promise();
    }
    
    function executeAfterAnimation() {
        alert("animation done.");
    }
    
    animateBox().done(function() {
        executeAfterAnimation();
    });
});