5秒后隐藏DIV或用户点击关闭链接

仅供参考，请参阅jsFiddle链接here。这是一个简短的脚本，显示一个stackoverflow样式的弹出消息。我想要做的是让用户选择让消息在5秒后自行消失，或者通过单击消息对话框右侧的“X”消除消息。5秒后隐藏DIV或用户点击关闭链接

我试图添加延迟：

$("#message").fadeIn('slow').delay(5000).queue(function() { 
    $('#message').fadeOut('slow'); 
});

这将正常工作，但随后的“X”链接上的onclick事件关闭该消息对话框将不会触发。

任何帮助将不胜感激。

来源

2013-07-16 Andy Evans

点击“X”正常工作......你必须确保你没有在点击“Result'小提琴角落，那么它不会开火。 – tymeJV

@tymeJV正确，它确实有效，但是当我将延迟添加到5秒后淡出DIV时，onClick不再有效。我想同时拥有 - 意思是，如果用户在5秒后没有关闭对话框，那么它将自行关闭。 –

我将#message的CSS样式更改为'top：80'，将其从'Result'指示符中取消。 – DevlshOne

试试这个：

$("#message").fadeIn('slow').delay(5000).fadeOut('slow'); 

$('#message a.close-notify').click(function() { 
    $('#message').stop().fadeOut('slow', removeMessageLayer); 
    $('#messageContainer').text(); 
    return false; 
});

演示：http://jsfiddle.net/xSRk8/15/

为什么点击X，当您添加的自动褪色是jQuery的排队激励方法，所以在以接近停止工作的原因你点击处理程序，您尝试将淡出的元素添加到队列之后的延迟时间。如果您拨打.stop()，它将取消任何现有的排队效果，因此您可以立即执行。

另外你的removeMessageLayer()函数根本没有删除消息元素 - 你只是认为它已经消失了，因为它已经消失了。您的代码

$('body').remove('#message');

...说，如果它传递给remove()选择，当然它永远不会匹配能清除体内的元素。您需要$('#message').remove();，并且您不需要测试消息元素是否先存在，因为如果在空的jQuery对象上调用jQuery，则实际上会忽略.remove()。因此，使用这样的：

function removeMessageLayer() { 
    $('#message').remove(); 
}

来源

2013-07-16 13:21:11 nnnnnn

就是这样！谢谢！ –

$(body).on('click','#message a.close-notify',function() { 
    $('#message').fadeOut('slow'); 
    $('#messageContainer').text(); 
    removeMessageLayer(); 
    return false; 
});

因为它是一个动态创建的元素，所以最好的做法是应该委派click事件。

$("#message").fadeIn('slow',function() { 
     $(this).delay(5000).fadeOut('slow'); 
    });

这会根据消息的成功创建给你5秒的延迟。

来源

2013-07-16 13:13:01 DevlshOne

A委托处理程序可能更明智，但在这种情况下，您不需要一个处理程序，因为OP的代码只会调用'.click（）'_after_创建有问题的元素。 – nnnnnn

我只是试图在回答问题的同时宣传“最佳做法”。你是对的，这不是必要的，但它是首选，我编辑了我的答案来反映这一点。 – DevlshOne

请注意，如果使用这样的委托处理程序，则应将该代码移出displayMessage（）函数，否则每次显示消息时都会绑定其他处理程序。 – nnnnnn

可能不是最干净的，但您可以在displayMessage函数的末尾添加setTimeout调用。

timeout = setTimeout(function() { 
     $('#message').fadeOut('slow'); 
     $('#messageContainer').text(); 
     removeMessageLayer(); 
     return false; 
    }, 5000);

，然后在单击处理程序，调用clearTimeout(timeout)取消超时。

我已更新您的fiddle。似乎工作。

UPDATE：代码不干净 - 我重复了一些事情。但是我将把清理工作留作未来的练习。 :)

来源

2013-07-16 13:16:38

的代码将（测试）

$("#message").fadeIn('slow').delay(5000).fadeOut('slow'); // display message div 
$('#message-close').click(function() { // click close button 
$('#message').stop().fadeOut('slow'); 

return false; 
}); 

$(document).on('keydown', function(e) { 

if (e.keyCode === 27) { 
    $('#message').stop().fadeOut('slow'); // close div when Esc key is pressed 
     } 
    }); 
});

来源

2014-01-21 02:23:19 user1526780

5秒后隐藏DIV或用户点击关闭链接

回答

相关问题