Question

我正在尝试设置一些代码，以便我首先隐藏它，但在页面加载后淡入。

我有以下HTML代码：

<div class="hidden">
<p>This is some text.</p>
</div>

然后我也有这个CSS代码，它隐藏了<div>。

div.hidden
{
    display: none
}

最后，我有我的jQuery：

$(document).ready(function() {
    $('div').fadeOut(1);
    $('div').removeClass('hidden');
    $('div').fadeIn(1000);
});

我希望会发生的是第一个.fadeOut（）会淡出，removeClass会阻止CSS隐藏它，而最终的.fadeIn（）会将其淡化回页面。不幸的是，这不起作用。

您可以在此处查看代码：Fiddle

那么有人可以告诉我如何在页面加载之前隐藏<div>，然后使用jQuery淡化它吗？

谢谢！

Answer 1

问题是fadeIn适用于隐藏元素，当您在调用fadeIn()之前移除隐藏类时，元素已完全显示，因此没有任何内容可以fadeIn()

应该是

$(document).ready(function () {
    $('div.hidden').fadeIn(1000).removeClass('hidden');
});

演示：Fiddle

Answer 2

HTML代码：

<div class="toshow" style="display:none;">
    This is some text.
</div>

jquery代码：

$(document).ready(function () {
    $('div.toshow').fadeIn(2200);
    // OR $('div.toshow').show(2200);
    // OR $('div.toshow').slideDown("slow");
});

Change the jquery show()/hide() animation?

Answer 3

http://jsfiddle.net/DerekL/Bm62Y/5/

//If you do not want the "hidden" class to be still around
$(function() {
    $('div').fadeIn(1000).removeClass('hidden');
});

//If you don't mind it, then you can just do fadeIn
$(function() {
    $('div').fadeIn(1000);
});

Answer 4

//image fade in
    //set image display none
        $("img").css("display", "none");
    //call the image with fadeIn effect
    $("img").fadeIn(5000 , function(){
        $(this).css("display","normal");
    });

我对图像进行了实验。你也可以尝试文字..

页面加载时jQuery .fadeIn（）？

4 个答案: