點擊功能「這個」不工作

Question

我有一個劇本，我發現在http://www.red-team-design.com/cool-notification-messages-with-css3-jquery，但我有我的代碼有問題

我想要得到它1）隱藏點擊，和2

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

這是越來越EXECUT15秒

HTML之後）隱藏由PHP，即我使用的PHP只是將下面一行到我的代碼ED：

<script type='text/javascript'> 
    $(document).ready(function(){ 
     showMessage(warning) 
    }); 
</script>​ 

現在，出於某種原因，當我點擊的div不隱藏，而15後也不會隱瞞如指定的秒數。

我已經創建了一個JSFiddle http://jsfiddle.net/dpdesignz/yTaRa/1/如果有人會介意看看可能出現什麼問題？我有一種感覺，它與PHP回聲執行部分有關，所以有人知道另一種方法可能做到這一點？

Answer 1

你的代碼有一些錯誤。

首先warning is not defined

它指的是以下幾點：

$(document).ready(function(){ 
    showMessage(warning) 
}); 

warning不是一組變量。也許你的意思是'warning'。

其次showMessage is not defined

showMessage('warning'); 

這被定義的showMessage()功能之前被調用。您可以通過此調用移動到另一個$(document).ready()

http://jsfiddle.net/yTaRa/5/

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); 
    }); 
    showMessage('warning'); 
}); 
​ 

Answer 2

$(document).ready(function(){ 
    $('.info, .warning, .error, .success').hide(); 
    $('.info, .warning, .error, .success').slideDown(500); 
    $('.info, .warning, .error, .success').delay(15000).slideUp(500); 
    $('.info, .warning, .error, .success').on('click', function() { 
     $(this).hide(); 
    }); 
}); 

讓jQuery的做所有的工作=）

http://jsfiddle.net/yTaRa/8/

解決這個問題。如果每個消息類型也將被歸類爲消息，我們可以進一步降低此代碼...

$(document).ready(function(){ 
    $('.message').hide(); 
    $('.message').slideDown(500); 
    $('.message').delay(15000).slideUp(500); 
    $('.message').on('click', function() { 
     $(this).hide(); 
    }); 
}); 

http://jsfiddle.net/yTaRa/9/

$(document).ready(function(){ 
    setTimeout(function() {     //sets a 15 second timer on each message to collapse up over .5 seconds 
     $('.message').slideUp(500); 
    }, 15000); 
    $('.message').hide();      //hides all elements with the class message. 
    $('.message').slideDown(500);    //animates messages to expand down over .5 seconds 
    $('.message').on('click', function() { //wires up click event to hide message on click 
     $(this).slideUp(500); 
    }); 
}); 

http://jsfiddle.net/yTaRa/10/

我不得不使用的setTimeout的效果基本show的採用15秒的通話的點擊效果基本show不會與火：

$('.message').delay(15000).slideUp(500); 

我認爲這是因爲一次只能在同一個元素上調度一次slideUp（）調用。