Deferred object confusion
<p>The following snippet works as expected:</p>

<pre><code>function boxAnimation() {
        var dfd = $.Deferred();
        $('div').fadeIn('slow', dfd.resolve);            
        return dfd.promise();
    }

    $(function () {
        boxAnimation().done(
            function () { $(this).animate({ 'margin-top': 50 }); },
            function () { $(this).animate({ 'margin-left': 150 }); },
            function () { $(this).animate({ 'margin-top': 250 }); },
            function () { $(this).animate({ 'margin-left': 350 }); }
        ).fail(function () { alert('failed'); });
    });
</code></pre>

<p>However in this one <strong>the differed object is neither rejected or resolved</strong>.</p>

<p>Please tell me where am I going wrong.</p>

<pre><code>function boxAnimation() {
        var dfd = $.Deferred();
        var randomNum = Math.floor(Math.random() * 5);
        $('div').fadeIn('slow', function () {
            if (randomNum == 1) {
                dfd.reject;
            }
            else {
                dfd.resolve;
            }
        });            
        return dfd.promise();
    }

    $(function () {
        boxAnimation().done(
            function () { $(this).animate({ 'margin-top': 50 }); },
            function () { $(this).animate({ 'margin-left': 150 }); },
            function () { $(this).animate({ 'margin-top': 250 }); },
            function () { $(this).animate({ 'margin-left': 350 }); }
        ).fail(function () { alert('failed'); });
    });
</code></pre>

<p>my body is:</p>

<pre><code>&lt;div id='box' style='width:200px; height:200px; border:solid 1px #222222; display:none; background:#cccccc'&gt;&lt;/div&gt;
</code></pre>
