jQuery .fadeIn（）在页面加载？ [英] jQuery .fadeIn() on page load?

问题描述

我试图设置一些代码，这样我就有了一个隐藏起来的内容，然后在页面加载后淡入。

我有以下HTML代码：

 < div class =hidden> 
< p>这是一些文字。< / p> 
< / div> 
  

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

  div.hidden 
 {
显示：none 
} 
  

最后，我有我的jQuery：

  $（document）.ready（function（）{
 $（'div'）。fadeOut（1）; 
 $（'div'）。 removeClass（'hidden'）; 
 $（'div'）。fadeIn（1000）; 
}）; 
  

我希望会发生的是第一个.fadeOut（）会淡出removeClass会阻止CSS隐藏它，并且最终.fadeIn（）会将其淡入到页面中。不幸的是，这是行不通的。

您可以在这里查看代码：小提琴

那么有人可以告诉我如何保持< div> 隐藏直到一个页面加载，然后使用jQuery淡化它？

谢谢！

解决方案 fadeIn（）之前移除隐藏的类时， fadeIn 被称为元素已完全显示，所以没有什么可以 fadeIn（）

它应该是

  $（document）.ready（function（）{
 $（'div.hidden'）。fadeIn（1000）。 removeClass（'hidden'）; 
}）; 
  

演示：小提琴

I'm trying to set up some code so that I have a that is hidden at first but then fades in after the page is loaded.

I have the following HTML code:

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

Then I also have this CSS code, which hides the <div>.

div.hidden
{
    display: none
}

Finally, I have my jQuery:

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

What I was hoping would happen was that the first .fadeOut() would fade out the , the removeClass would stop the CSS from hiding it, and the final .fadeIn() would fade it back onto the page. Unfortunately, this did not work.

You can view the code here:Fiddle

So can someone please tell me how to keep a <div> hidden until a page loads, and then fade it in using jQuery?

Thanks!

解决方案

The problem is fadeIn works on hidden elements, when you remove the hidden class before the fadeIn() is called the element is fully displayed so there is nothing to to fadeIn()

It should be

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

Demo: Fiddle

这篇关于jQuery .fadeIn（）在页面加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！