JQuery：如何以隐藏的状态启动对象，使 .fadeIn() 方法可用

Question

JQuery：如何以隐藏的状态启动对象，使 .fadeIn() 方法可用

7

我有一个想要隐藏的对象。我尝试过逐一使用以下这些样式，它们都在一个类中，而不是作为内联样式。

display:none;

并且

opacity:0;filter:alpha(opacity=0);

现在，这两个显然都起作用了，对象是隐藏的。问题在于当我使用它们时，JQuery的.fadeIn()函数不起作用。事实上，当我将不透明度设置为.5（50）时，淡入只会淡入到.5（50）。

那么我应该将对象默认设置为什么，才能使.fadeIn()函数正常工作呢？

谢谢！

- Nate

2

如果您只使用 display:none ，fadeIn() 应该可以工作。这里有一个例子：http://jsfiddle.net/n7FzR/1/ - user113716

你确定你没有试图fadeIn一个附加了这些样式的元素的子元素吗？ - Yi Jiang

2个回答

2

您可以使用以下编写的代码，或将您的代码添加到页面底部。

.fadeInOnLoad
{
  display:none;
}

      <div class="fadeInOnLoad">iam visible after page is loaded</div>

      jQuery(function(){
           // your fade in code, call it after dom is ready
            jQuery('.fadeInOnLoad').fadeIn();
        });

我认为你的问题是：

在浏览器中创建DOM元素之前调用了淡入效果
或者使用jQuery，Visual Studio版本，据我所记，jQuery在Visual Studio版本中的不透明度方面存在一些错误

- Praveen Prasad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pramendra Gupta · Accepted Answer

带有可运行版本的代码

HTML

<html>
    <body>
        <p>test</p>
    </body>
</html>

jQuery

$(document).ready(function() {
 $('p').fadeTo('slow', 1, function() {
      // Animation complete.
    });
});

CSS

p {
    display:none;
    opacity:0.0;
    filter:alpha(opacity=0);
}

Live demo

http://jsfiddle.net/2p2v4/