javascript - jQuery 'fade in' 在页面加载时不在 css 中使用 'display:none'

Question

希望应该是一个简单的...

所以我在我的网站上进行了基本的页面加载淡入之后，类似于该网站的... http://jack-hughes.com/

我遇到的问题是，标准的 jQuery fadeIn 函数似乎需要在要动画的元素上使用“display:none”，这显然意味着如果有人禁用了 javascript，它会保持隐藏状态。

$('.h1').fadeIn('slow', function() {
    // Animation complete
});

我可以通过有人向我指出正确的方向来获得这种效果，而无需在我的任何元素上显示:无。

我自己试了一下，没用。简单地尝试检查元素是否存在，如果存在，将 css 不透明度设置为 0，然后运行动画。我相信您可以 mock 我(我不是 JS 人)。谢谢!

if($('.h1').length > 0) {
    $(this).css("opacity","0");
    $('.h1').animate({
        opacity:1,
    }, 1500, function() {
        //Animation Complete
    });
};

Answer 1

我认为你最好的选择是在你的 CSS 中使用 display:none 然后包含一个像这样包装的简单样式标签

<noscript>
    <style>
        #container { display:block !important; }
    </style>
</noscript>