jQuery队列消息
-
06-07-2019 - |
题
我有一个应该在网站上显示消息的简短功能。
function showHint() {
$('#notify').html('message text').show('slide', {direction: 'right'}, 500);
}
还有另一个隐藏消息的功能。
function hideHint() {
$('#notify').hide('slide', {direction: 'right'}, 500);
}
问题是,如果我多次调用此函数,它会尝试同时显示所有消息并且一切都会中断。我想调用该函数两次然后它应该排队动画并显示一个接一个的消息。该函数应该同时调用多次,但是一个接一个地显示。当冷杉隐藏时,应显示下一条消息。
我该如何解决这个问题?会很好!
解决方案
这是我过去使用的一个迷你自定义插件,它一个接一个地链接着一堆动画。
// Good for serializing animations
$.fn.chain = function(fn) {
var elements = this;
var i = 0;
function nextAction() {
if (elements.eq(i)) fn.apply(elements.eq(i), [nextAction]);
i++;
}
nextAction();
};
您可以这样称呼它( 以下是使用中的示例 ):
$(document).ready(function() {
$('li').chain(function(nextChain) { this.slideToggle("fast", nextChain); });
});
传递给 chain
的函数会传递另一个函数,当你关闭一个循环时,你必须调用它。在上面的示例中,我们只是将 nextChain
函数作为回调传递给 slideToggle
。
不隶属于 StackOverflow