如何使用jQuery在页面加载时淡入div消息

Question

我试图在3秒后使用fadein和fadeout加载页面时显示div消息，但我的代码似乎不起作用，请问有什么帮助吗？我做错了什么？

HTML

<div id="message" class="jumbotron" style="display:none;">
    <p><?php echo $m; ?></p>
</div> 

的jQuery

$(document).ready(function(){

        $('div#message').fadeIn(3000).delay(3000).fadeOut(2000);

});

Answer 1

您的代码适合我（Here's a fiddle）。问题是你还没有包含到jQuery库的有效链接，或者在它到达导致它停止执行的下面代码之前发生错误。

的jQuery

$(document).ready(function(){
        $('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});

Answer 2

在页面加载时淡化消息，然后设置超时以便在3秒后淡出

检查DEMO

修改

$('#message').fadeIn()
.queue(function() {
    setTimeout(function() {
        $('#message').fadeOut();
    }, 3000);
    $(this).dequeue();
});

Answer 3

您是在与div元素相同的页面上编写此脚本还是在外部页面中？ 如果在外部页面上，则尝试通过简单地放置警告框来检查控件是否传递到此页面 如果此脚本位于同一页面上，请确保在您定义的元素之后编写此脚本，如果您已在顶部或#message div之前编写此脚本，则脚本将在页面上加载之前运行不会看到任何差异。

Answer 4

$('div#message').fadeIn(3000,function()
{
    $(this).delay(3000);
    $(this).fadeOut(200);

});

希望这对你有用。