Question

我有一个页面，我想在点击链接时淡入和淡出div。以下是该网页的简化版本。

<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/fading.js"></script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="index.php" class="transition">home</a></li>
            <li><a href="blog.php" class="transition">blog</a></li>
        </ul>
    </div>
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra dictum magna nec eleifend. Curabitur malesuada mauris suscipit purus euismod ultricies et id ipsum. Praesent sagittis in justo nec ultricies. Vivamus in lectus ac sem varius consequat. Integer pretium augue sit amet tempus mollis. Maecenas massa magna, bibendum nec quam a, eleifend congue diam. Aliquam erat volutpat. In hac habitasse platea dictumst.
    </div>
</body>
</html>

脚本fading.js通过淡入淡出#content来平滑页面之间的过渡。

$(document).ready(function() {
    $('#content').css("display", "none");
    $('#content').fadeIn(800);
    $('a.transition').click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $('#content').fadeOut(800, redirectPage);       
    });
    function redirectPage() {
        window.location = linkLocation;
    }
});

令人惊讶的是，它就像Safari 7上的魅力一样，但在Chrome上失败了。选择器#content似乎不起作用，导致整个body（包括menu）在事件发生时逐渐淡入淡出。

我想知道为什么会这样。反正有没有阻止这种情况发生？

fadeIn（）选择器无法在Chrome中使用

0 个答案: