animation callback functions not waiting for animation to complete :(

animation callback functions not waiting for animation to complete :(

Hi guys,

I'm developing a custom plugin to hide/show text with some nice little animations. Basically when the 'Read Less' link is pressed the text is meant to fade out, its containing div slides up and finally the link text is changed to 'Read More'. Clicking the link again slides down the div and reappears the text, again changing the link text to 'Read Less'.

At the moment the animations are not smooth. jQuery doesn't seem to wait for the first animation to finish before firing the second, so clicking on the 'Read Less' link fades out the text but then div jumps up suddenly instead of gliding up :(

You can see this in action here (very handy tool this actually!): http://jsfiddle.net/9SupU/3/


Many thanks for any help/advice,
Benny

HTML Code
  1. <p><a class="bf_trigger">Read Less</a></p>
    <div class="bf_content_container">
        
    <div class="bf_content">some sample text 
        
    </div>
    </div>
    <script type="text/javascript">
        $
    ('.bf_toggle_trigger').bluefire();
    </script>
jQuery Code
 
  1. (function($){

    $

    .fn.bluefire = function(options){

        

    var opts = $.extend({},$.fn.bluefire.defaults,options);

        

    // get the containers and content divs, then check if there the same number of each.
        
    var containerArray = $('.'+opts.containerClass);
        
    var contentArray = $('.'+opts.containerClass + ' .' + opts.contentClass);

        

    if(containerArray.length != contentArray.length) return false; // HTML in wrong format for plugin.
        
    if((opts.speed != 'slow') && (opts.speed != 'fast')) opts.speed = 'slow';

        

    var index = 0; // the current element

        

    return $('.'+opts.triggerClass).each(function(){

            

    var trigger = $(this); // the current trigger element.
            trigger
    .attr('rel',index);

            index

    ++;

            trigger

    .click(function(){ // bind to the click event

                

    if(trigger.html() == opts.moreText) { // display the div

                    $

    (containerArray[(trigger.attr('rel')*1)]).slideDown(opts.speed,function(){
                        $
    (contentArray[(trigger.attr('rel')*1)]).fadeIn(opts.speed);
                        trigger
    .html(opts.lessText);
                    
    });

                

    }
                
    else if(trigger.html() == opts.lessText) { // hide the div

                    $

    (contentArray[(trigger.attr('rel')*1)]).fadeOut(opts.speed,function(){
                        $
    (containerArray[(trigger.attr('rel')*1)]).slideUp(opts.speed);
                        trigger
    .html(opts.moreText);
                    
    });

                

    }
            
    }); // end of trigger.click bind
        
    }); // end of .each loop
    };

    $

    .fn.bluefire.defaults = {
        containerClass
    : 'bf_content_container',
        contentClass
    : 'bf_content',
        triggerClass
    : 'bf_trigger',
        moreText
    : 'Read More',
        lessText
    : 'Read Less',
        speed
    : 'slow'                   
    };


    })(jQuery);