Animate div then fade out another div
<pre><code>$('li:not(#blob)', nav).hover(function() {
    // mouse over
    clearTimeout(reset);

    blob.animate(
        {
            left : $(this).position().left,
            width : $(this).width()


        },
        {
            duration : options.speed,
            easing : options.easing,
            queue : false
        },
         function(){
         $('#slate').fadeOut('fast', function(){ 
         $('#slate').html($('.stuff1').html()).fadeIn('fast');
                 }); 
                } 
         );                                          
       });
</code></pre>

<p>I been trying to get a div (not connected to the animation) to fade out, get the contents of a hidden div (which is nested inside the li element which "blob" has moved to) after the animation happens, I think I'm going in the right direction here but can't seem to get this to work properly.</p>

<p>Being a jQuery novice I can't understand why a callback is not being made after the animate function?</p>

<p>Edit:</p>

<p>below I have posted the full function I am trying to doctor. I trying to get the function to fade out change the content to the content of a div that is nested in each of the li's. at the moment I using content from just one of them on a I will cross that bridge when I come to it basis.</p>

<p>The function moves the blob element to the li element the cursor is hovering over.</p>

<p>js fiddle <a href="http://jsfiddle.net/CK2pZ/4/" rel="nofollow">http://jsfiddle.net/CK2pZ/4/</a></p>

<pre><code>jQuery(function($) {

$.fn.spasticNav = function(options) {

    options = $.extend({
        overlap : 0,
        speed : 500,
        reset : 1500,
        color : '#0b2b61',
        easing : 'easeOutExpo'
    }, options);

    return this.each(function() {

        var nav = $(this),
            currentPageItem = $('#selected', nav),
            blob,
            reset;

        $('&lt;li id="blob"&gt;&lt;/li&gt;').css({
            width : currentPageItem.outerWidth(),
            height : currentPageItem.outerHeight() + options.overlap,
            left : currentPageItem.position().left,
            top : currentPageItem.position().top - options.overlap / 2,
            backgroundColor : options.color
        }).appendTo(this);


        blob = $('#blob', nav);

        $('li:not(#blob)', nav).hover(function() {
            // mouse over
            clearTimeout(reset);

            blob.animate(
                {
                    left : $(this).position().left,
                    width : $(this).width()


                },
                {
                    duration : options.speed,
                    easing : options.easing,
                    queue : false
                },
                                    function(){
                                     $('#slate').fadeOut('fast', function(){ 
                                     $('#slate').html($('.stuff1').html()).fadeIn('fast');
                                     }); 
                        } 
                               );



                     });


    }); // end each



};


})(jQuery);
</code></pre>
