为什么fadeIn在加载时闪烁？

Question

我根据 youtube 教程制作了一个网站。 Here's my test site。和 here's the tutorial (final step of 3) 如果有帮助。尚未使用 CSS。

当我单击菜单中的链接时。一切都像想象的那样消失。但在淡入淡出动画结束时上一页闪烁。

我
我对 JavaScript 完全陌生。

index.php:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SuperFresh</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a class="menu_top" href="pages/home.php">Home</a> /
<a class="menu_top" href="pages/portfolio.php">Portfolio</a> /
<a class="menu_top" href="pages/contact.php">Contact</a> /

<div id="content_area"></div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
</html>

nav.js:

$(document).ready(function () {
    $('#content_area').load($('.menu_top:first').attr('href'));
});

$('.menu_top').click(function () {
    var href=$(this).attr('href');
    $('#content_area').hide('slow').load(href).fadeIn('slow');

    return false;
});

Answer 1

替换：

var href=$(this).attr('href');    
$('#content_area').hide('slow').load(href).fadeIn('slow');

与：

$('#content_area').hide('slow', function(){
    $(this).load($(this).attr('href')).fadeIn('slow');
});

这将使其淡出并等待动画完成，然后再调用该函数并加载新内容。

查看the documentation 了解更多信息。

Answer 2

您可以将处理程序与您自己的函数一起使用...

例如：

$('#show').click(function() {
    $('#myDiv').show(0, onDivShow);
});

$('#hide').click(function() {
    $('#myDiv').hide(0, onDivHide);
});


function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }

Answer 3

你可以试试这个：

$('.menu_top').click(function () {
    var href=$(this).attr('href');
    var page = $('<div/>').attr('id','page').load(href);
    $('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow');

    return false;
});