Added jQuery Promises with Deferred and css transitions

README.md

@@ -229,4 +229,38 @@ $(document).on('visibilitychange', function (e) {
     console.log('Tab is now hidden!');
   }
 });
-```
+```
+
+### jQuery Promises with Deferred and CSS Transitions
+
+By returning `deferred.promise()` we can chain the animation every time it's successfully finished:
+
+```javascript
+var animate = function($el, cl) {
+    var deferred = $.Deferred();
+    var transitionEnd = 'transitionend webkitTransitionEnd MSTransitionEnd';
+
+    $el.addClass(cl).on(transitionEnd, function() {
+        deferred.resolve($(this));
+    });
+
+    return deferred.promise();
+};
+
+// Usage
+var p = animate($('.element'), 'moveRight').then(function($el) {
+    // $el is returned as an argument
+    return animate($el, 'moveDown');
+}).then(function($el) {
+    return animate($el, 'moveLeft');
+}).then(function($el) {
+    return animate($el, 'moveUp');
+});
+
+// p is also a Promise
+p.then(function() {
+    console.log('Done with all');
+});
+```
+
+Demo: http://jsbin.com/zovoni/edit?html,css,js,output

js/jquery-promises-with-deferred-and-css-transitions/snippet.js

@@ -0,0 +1,27 @@
+// jQuery promises with deferred and CSS transitions
+
+var animate = function($el, cl) {
+    var deferred = $.Deferred();
+    var transitionEnd = 'transitionend webkitTransitionEnd MSTransitionEnd';
+
+    $el.addClass(cl).on(transitionEnd, function() {
+        deferred.resolve($(this));
+    });
+
+    return deferred.promise();
+};
+
+// Usage
+var p = animate($('.element'), 'moveRight').then(function($el) {
+    // $el is returned as an argument
+    return animate($el, 'moveDown');
+}).then(function($el) {
+    return animate($el, 'moveLeft');
+}).then(function($el) {
+    return animate($el, 'moveUp');
+});
+
+// p is also a Promise
+p.then(function() {
+    console.log('Done with all');
+});