jQuery-我的自定义插件不会对动画排队?
我为一个朋友做了一个由两部分组成的jQuery动画来显示/隐藏一块文本。它基本上淡出了一个DIV文本,当动画结束时,它隐藏了DIV。它工作得非常好,所以我决定把它做成一个插件 但是现在,我的插件中的相同代码不会等到我的第一个动画完成后再触发第二个动画。它们同时发生。我尝试了jQuery的jQuery-我的自定义插件不会对动画排队?,jquery,jquery-plugins,Jquery,Jquery Plugins,我为一个朋友做了一个由两部分组成的jQuery动画来显示/隐藏一块文本。它基本上淡出了一个DIV文本,当动画结束时,它隐藏了DIV。它工作得非常好,所以我决定把它做成一个插件 但是现在,我的插件中的相同代码不会等到我的第一个动画完成后再触发第二个动画。它们同时发生。我尝试了jQuery的.queue以及fadeOut()/fadeIn()show()/hide()方法的正常回调函数参数,但似乎没有任何效果。谢谢你的建议 HTML代码 [你不回这个)()嘿,彼得,谢谢你的建议。很抱歉延迟返回,添加
.queue
以及fadeOut()/fadeIn()show()/hide()
方法的正常回调函数参数,但似乎没有任何效果。谢谢你的建议
HTML代码
[你不回这个)()嘿,彼得,谢谢你的建议。很抱歉延迟返回,添加了return关键字,如您所说的“return$('.+opts.triggerClass)。每个(function(){'),但它仍然不能帮助我制作动画:(未更改:似乎有效?或者你是在追求其他东西吗?嗨,Alexander,我不知道JSFIDLE,它是一个很棒的工具。我担心插件在那里也不能正常工作。我在文本下添加了一个DIV,它消失/重新出现,动画很不稳定,一点也不像它应该的样子:(
<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);