Question

我有一些元素可以移出document.ready上的主容器并在其中设置动画在window.load上使用animate（）

在webkit浏览器中，其中一个元素的文本会在屏幕上短暂闪烁。它适用于非webkit浏览器。

以下是代码：

      <header>
        <div id="logo">
            <h1 class="ir">Blank Consultants Inc.</h1>
            <a href="index.html"><img src="images/logo.gif" alt="Pro-edge logo" width="258" height="158" /></a>
            <h2 id="tagline">Powerful. Effective. Creative.</h2>
        </div>

        <div id="contact">
            <a id="email" href="mailto:info@blank.com">Email: info@blank.com</a>
            <p id="number">Toll-Free: 5555555</p>
        </div>

        <nav id="nav">
            <a href="/">home</a>
            <a href="/">what we do</a>
            <a href="/">blogs</a>
            <a href="/">cosmo</a>
            <a href="/">team</a>
            <a href="/">contact us</a>
        </nav>

        <div id="header-image" class="clear">
            <img src="images/mainPage.jpg" width="960" height="283" />
        </div>
    </header>

JavaScript的：

$(document).ready(function () {
    $('#logo').css('left', '-455px');
    $('#contact').css('right', '-455px');
    $('nav').css('top', '-180px');

    $(window).bind("load", function () {
        $('nav').animate({ 'top': 0 }, 1200, 'swing');
        $('#logo').animate({ 'left': 0 }, 1250, 'easeOutExpo');
        var x = function () {
            $('#contact').animate({ 'right': 0 }, 1250, 'easeOutExpo');
        };
        setTimeout(x, 170);
    });
});

我正在考虑使用CSS3在webkit中执行此操作，但我真的很想知道是什么导致了这个问题。

谢谢！

Answer 1

您的元素只会在页面加载后隐藏在那之前，它们将是可见的。

您应该在元素之后立即放置Javascript，而不是等待页面加载。

您也可以使用CSS隐藏元素，但这会为没有Javascript的访问者破坏您的网站。

Answer 2

我怀疑在显示元素和脚本运行之间存在短暂的延迟。您可以尝试隐藏HTML中的元素，然后在加载文档时在javascript中显示它们。这样可以防止你所指的闪烁效应。

Webkit闪烁的文本应该是隐藏页面加载

2 个答案: