淡出当前内容和淡入新内容 jquery答案

【问题标题】：fadeOut current content and fadeIn new content jquery淡出当前内容和淡入新内容 jquery
【发布时间】：2012-04-24 08:58:31
【问题描述】：

我正在尝试创建一个侧边菜单，这样当用户单击链接时，div（页面中间）中的当前内容应该fadeout，新页面内容应该fadeIn，我创建了这个方法：

<script type="text/javascript">
    $('a').click(function() {
        $('#content').html('<img src="ajax-loader.gif" width="100" alt="loading">').show();
        var page = $(this).attr('href');
        $('#content').hide().load(page).fadeIn('slow');
        return false;
    });
</script>

但是，效果不如预期，有谁知道如何增强这个方法？我希望 fadeout 当前内容到背景页面，fadeIn 新内容。
但是当前内容消失了

我的html代码：

<body>
    <h1><img src="images/cooltext679404844.png"/></h1>
    <ul id="nav" class="mmenu" type="none">
        <li><a href="contact.php"> Contact </a></li>
        <li><a href="register.php"> Register </a></li>
        <li><a href="login.php"> Login</a></li>
        <li><a  href="upload.php"> Submit paper </a></li>
        <li><a  href="tabs.php"> tabs menu test </a></li>
        <li><a href="time-frame.php">profile</a></li>
        <li><a  href="status-reviews.php">check status of reviews</a></li>
    </ul>
    <p style="font-size: small;text-align: center;bottom: 0px;left: 300px; line-height: 0%;position:fixed; background-color: #cc8800">
        <a target="content" href="about.php">About us</a> | <a target="content" href="terms.php">Terms of service</a> | <a target="content" href="policy.php">Privacy Policy</a>
    </p>
    <div id="content"></div>
</body>

【问题讨论】：

我认为这是因为您链接了 load 和 fadeIn 方法。 load 以异步方式工作

标签： jquery dynamic-data fadein fadeout fading

【解决方案1】：

试试：


$("#content").fadeOut('slow', function(){
    $("#content").load(page, function () {
            $(this).fadeIn('slow');
    });
});

【讨论】：

【解决方案2】：

在您的负载中使用回调。否则它会立即淡入：

var content = $('#content');
content.fadeOut().load(page, function() {
    content.fadeIn();
});

【讨论】：