Question

我在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回声执行的部分有关，所以有人知道另一种方法可能会这样做吗？

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进行15秒的slideUp调用，因为单击slideUp不会触发：

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

我认为这是因为一次只能在同一个元素上调度一个slideUp（）调用。

单击“此”功能不起作用

2 个答案: