0

我已经根据 youtube 教程制作了一个网站。这是我的测试站点。如果 有帮助，这里是教程（第 3 步的最后一步） 。还没有使用 CSS。

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

我
对 JavaScript 完全陌生。

索引.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>

导航.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;
});
4

3 回答 3

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

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

查看文档以获取更多信息。

于 2013-01-18T09:59:51.167 回答
0

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

例如：

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

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


function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }
于 2013-01-18T10:21:42.047 回答
0

你可以试试这个：

$('.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;
});
于 2013-01-18T10:08:45.317 回答