加载时为什么fadeIn闪烁？

我从YouTube教程制作了一个网站。 Here's my test site。如果有帮助，可以使用 here's the tutorial (final step of 3)。尚未使用CSS。加载时为什么fadeIn闪烁？

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

Me
我完全不熟悉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; 
});

来源

2013-01-18 naPalmqvist

一个的jsfiddle将有助于 –

你是对的。但我无法让index.php工作。 = /所以我提交我的测试网站... – naPalmqvist

替换：

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。

来源

2013-01-18 09:59:51

没有闪烁，但href的只是显示home.php，尽管我点击了什么链接。看看[测试网站]（http://superfresh.se/laddasidan_stackflow02/）。 – naPalmqvist

你可以试试这个：

$('.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-18 10:08:45 Jai

[这是你的代码]（http://superfresh.se/laddasidan_stackflow01/）Jai。它现在消失了两次。但是这比以前更少刺激。你也许知道为什么它会做两次淡入淡出？ – naPalmqvist

只是更新了代码。 – Jai

我已更新[测试网站]（http://superfresh.se/laddasidan_stackflow01/）。但还有两次褪色。你比我更方便，所以我看不到你的更新做什么。 – naPalmqvist

你可以使用处理器用自己的功能...

为前：

$('#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-18 10:21:42

我对javascrip知之甚少，所以无法实现你的代码。太糟糕了，它看起来很稳固。 – naPalmqvist

加载时为什么fadeIn闪烁？

回答

相关问题