我做了一个小jQuery两部分动画,供朋友显示/隐藏一段文字。它基本上淡出了DIV文本,当动画结束时它隐藏了DIV。它工作得很好所以我决定把它变成一个插件。
但现在我的插件中的相同代码不会等到我的第一个动画完成后再触发第二个动画。它们都是立刻发生的。我尝试了jQuery的.queue
以及fadeOut()/fadeIn() show()/hide()
方法的正常回调函数参数,但似乎没有任何效果。非常感谢任何建议?
<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>
(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);