views:

64

answers:

0

hi guys and gals,

i did a little jQuery two part animation for a friend to show/hide a block of text. it basically faded out a DIVs text and when that animation finished it hid the DIV. it worked perfectly so I decided to make it into a plugin.

But now the same code in my plugin will not wait for my first animation to finish before triggering the second. they both happen at once. I tried jQuery's .queue as well as the normal callback function argument for the fadeOut()/fadeIn() show()/hide() methods but nothing seems to work. many thanks for any suggestions?

HTML CODE

<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 PLUGIN CODE

(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);