我在http://www.red-team-design.com/cool-notification-messages-with-css3-jquery找到了一个脚本,但我的代码有问题
我想让它1)点击隐藏,2)15秒后隐藏
HTML:
<div class="warning message">It is currently past 4pm. Any orders placed between now and midnight will not be placed until 4pm tomorrow.</div>
Javascript:
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++){
messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(function(){
$('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
hideAllMessages();
},15000);
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
});
这是由 php 执行的,我只是使用 php 将以下行插入到我的代码中:
<script type='text/javascript'>
$(document).ready(function(){
showMessage(warning)
});
</script>
现在由于某种原因,当我单击 div 时它不会隐藏,并且它不会在指定的 15 秒后隐藏。
我在http://jsfiddle.net/dpdesignz/yTaRa/1/创建了一个 JSFiddle,如果有人介意看看可能出了什么问题?我感觉它与 PHP 回显执行的部分有关,所以有人知道另一种方法来做到这一点吗?