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

你可以试试这个：

$('.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;
});

Answer 3

您可以使用具有自己功能的处理程序......

代表：

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

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


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

加载时为什么fadeIn闪烁？

3 个答案: