CODEWITHSUNDEEP
phpjquerymenufadeinflicker
naPalmqvist
naPalmqvist

Reputation: 1

Why is fadeIn flickering when loading?

I've made a site from an youtube tutorial. Here's my test site. And here's the tutorial (final step of 3) if it helps. No CSS used yet.

When I click a link in the menu. Everything fades like supposed. But at the end of fade animation the previous page flickers.

Me
I'm totally new to 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;
});

Upvotes: 0

Views: 448

Answers (3)

Jai
Jai

Reputation: 74738

You can try this:

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

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

you can use handlers with your own functions...

for ex :

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

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


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

Upvotes: 0

Tom Walters
Tom Walters

Reputation: 15616

Replace:

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

With:

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

This will fade it out and wait until the animation is complete before calling that function and loading in the new content.

Check out the documentation for more info.

Upvotes: 1

Related Questions