Question

我有一个希望简单的问题。我有一个函数，我给用户留言，它在预定义的div中显示消息。但是，如果另一条消息过快出现，它会更改消息，但随后会淡出并重新进入。

这就是我现在所在的地方; -

function readUserMessage(message) {

    if($('#userMessage').is(':visible')) {
        $('#userMessage').fadeOut(200).html("<span style=\"\">" + message + "</span>").fadeIn(300).delay(3000).fadeOut(300);
    } else {
         $('#userMessage').html("<span style=\"\">" + message + "</span>").fadeIn(300).delay(3000).fadeOut(300);
    }

}

任何帮助都非常感激。

Answer 1

.html()不会自动添加到jQuerys fx queue中，因此在您的动画内容完成之前它不会“等待”。您可以通过手动添加队列条目来解决此问题，例如

$('#userMessage').fadeOut(200).queue(function(next) {
     $(this).html("<span style=\"\">" + message + "</span>");
     next();
}).fadeIn(300).delay(3000).fadeOut(300);

参考：.queue()

Answer 2

你可以试试这个。 fadeOut有一个回调函数，一旦淡出结束就会被调用。你可以用它。

function readUserMessage(message) {
    if ($('#userMessage').is(':visible')) {
      $('#userMessage').fadeOut(200, function() {
        $(this).html("<span style=\"\">" + message + "</span>")
               .fadeIn(300).delay(3000).fadeOut(300);
      });
    } else {
       $('#userMessage').html("<span style=\"\">" + message + "</span>")
               .fadeIn(300).delay(3000).fadeOut(300);
    }
}

您可以查看演示@ jsFiddle.net：http://jsfiddle.net/KZYbs/

Answer 3

对于这样的问题，理论上最好的解决方案是使用队列。

基本上，在您的场景中，无论何时阅读用户消息，您都会执行操作。如果要管理这些操作，可以将它们放入队列中然后进行管理。

jAndy发布的代码非常有趣，如果您想了解有关队列的更多信息，我们会很好地解释here on stackoverflow和here on jquery site。

在这个问题上花一些时间可能非常有用，因为排队可以在很多情况下发挥作用。

Answer 4

您可以在使用stop function调用其他效果（淡入淡出，幻灯片等）之前强制完成队列。

jQuery - 替换用户消息 - 重复自己

4 个答案: