Question

我编写了以下简单函数，该函数主要使用两个参数来自服务器返回的另一个函数。

var timing = 10000;

function notificationOutput(type, message) {
    console.log('output now!');
    var note = $('.notification');
    note.css('display', 'none');
    if ( type == "success" ) { note.removeClass('warning').addClass('success'); }
    if ( type == "warning" ) { note.removeClass('success').addClass('warning'); }
    note.find('.message').html(message);
    note.slideDown( function() {
        note.delay(timing).slideUp();
    });
}

它所做的只是从页面顶部向下滑动一条消息（成功或警告）。 timing变量用于使通知栏保持10秒钟。因此，当触发该功能时，我希望条形为slideDown()，保持该位置10秒而不是slideUp()。

但是现在当触发该功能时，会出现一个奇怪的超时，直到出现通知栏。这意味着当函数被触发时，我现在在那里的console.log()输出会立即记录在我的JS控制台中，但是slideDown（）需要几秒钟的时间才会出现！那是为什么？

我希望slideDown()立即发生（在控制台中记录output now的同时）。为什么会出现延迟？

感谢您的帮助！

Answer 1

那里没什么明显的。我会尝试修剪代码，直到它按预期下滑。删除回调，删除html-set，删除成功/警告类设置器，在输出到控制台之前选择note元素，用立即显示替换幻灯片等。

首先尝试在备注上调用.stop(true,true)：note.stop(true,true).slideDown();。这是因为它忙于其他一些动画并且正在排队下滑。

Answer 2

试试这个

note.slideDown().delay(timing).slideUp();

Answer 3

我认为问题可能出在slideDown使用的easing函数中，默认情况下为swing（这是logaritmic）。尝试使用线性，也许尝试使用更快的滑动时间

note.slideDown(400, 'linear').delay(timing).slideUp(400, 'linear');

Answer 4

您没有将duration的值传递给slideDown。尝试：

note.slideDown(1000, function() {
  note.delay(timing).slideUp();
});

jQuery：具有通知功能的超时/延迟？

4 个答案: