Question

我有一个应该在网站上显示消息的简短功能。

function showHint() { 
    $('#notify').html('message text').show('slide', {direction: 'right'}, 500);
}

还有另一个隐藏消息的功能。

function hideHint() { 
    $('#notify').hide('slide', {direction: 'right'}, 500);
}

问题是，如果我多次调用此函数，它会尝试同时显示所有消息并且一切都会中断。我想调用该函数两次然后它应该排队动画并显示一个接一个的消息。该函数应该同时调用多次，但是一个接一个地显示。当冷杉隐藏时，应显示下一条消息。

我该如何解决这个问题？会很好！

Answer 1

这是我过去使用的一个迷你自定义插件，它一个接一个地链接着一堆动画。

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

您可以这样称呼它（ Here's an example of it in use ）：

$(document).ready(function() {
  $('li').chain(function(nextChain) { this.slideToggle("fast", nextChain); });
});

您传递给chain的函数会传递另一个函数，当您关闭一个周期时，您必须调用该函数。在上面的示例中，我们只是将nextChain函数作为回调传递给slideToggle。

Answer 2

你的showhint函数可以通过隐藏通知开始，当完成时，回调将是现有的showhint函数，它会改变文本并显示它。鉴于你已经做过的事情，代码应该不难。

Answer 3

你能不能只使用通知插件？这里有两个（one，two）非常漂亮。

jQuery队列消息

3 个答案: