ender deferred

ender.deferred.js

!function ($) {
  function deferred(exec) {
    var mock = {}
      , chain = []
      , key
      , $el = $(this)
      , push = function (key) {
          mock[key] = function () {
            chain.push({ key: key, arguments: arguments })
            return mock
          }
        }
    for (key in $el) {
      !isFinite(key) && push(key)
    }
    exec(function () {
      for (var i = 0; i < chain.length; i++) {
        $el = $el[chain[i].key].apply($el, chain[i].arguments)
      }
    })
    return mock
  }

  function fade(fadeFn) {
    return function(n, cb) {
      var self = this
      return deferred.call(this, function(fn) {
        fadeFn.call(self, n, function() {
          cb && cb()
          fn()
        })
      })
    }
  }

  $.ender({
      delay: function(n) {
        return deferred.call(this, function(fn) {
          setTimeout(fn, n)
        })
      }
    , fadeIn: fade($.fn.fadeIn)
    , fadeOut: fade($.fn.fadeOut)
  }, true)
}(ender);

$('#el').fadeOut().fadeIn().delay(500).css({width: '100px'})

@ded I know you didn't ask for this and I'm butting in but it's too interesting to let go. The concept could be made generic so you can trigger the deferred calls by other means. This example breaks the existing Morpheus fadeIn() and fadeOut() API because you get back the mock element instead of a stoppable; but you get the idea.