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