Почему 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 мерцает при загрузке?

ответ

Смежные вопросы