I'm trying to achieve a fade-out effect on the current page followed by fading in a new one. The fade-in effect is working fine, but when I click on the link, the new page loads without first fading out the existing content. The div that I want to apply the fade-in and fade-out effects to contains PHP-generated content like this:
Script:
<script type="text/javascript>
$(function(){
$('#article').fadeIn('250');
$('a').click(function() {$('#article').fadeOut('250')});
});
</script>
Link:
<a href="index.php?n=1"><li>Article 1</li></a>
Div:
<div id="article">
<?php
$n='articles/article'.$_GET['n'].'.php';
if (is_file($n)) {include($n);} else {include ("articles/error.php");}
?>
</div>
EDIT:
I have managed to make it work by combining your suggestions, but now I'm facing an issue with the duration of the fadeOut effect. Regardless of the duration I set, it always takes the same amount of time. Here is my updated code:
<script type="text/javascript">
$(function () {
$('a').click(function () { var a = $(this);
$('#article').fadeOut( 250, function () { window.location = 'index.php?n=' + a.attr('rel'); }); return false; });
$('#article').hide().fadeIn(250);
});
</script>