That old chestnut: FadeOut, load, FadeIn
Hello there, having some problems with jquery (1.2.6 production) - I've run through all the tutorials and so on, been playing about with it for a while and always had good results.
What I'm trying to achieve here isn't that esoteric, I did a search for the problem and other people have also had trouble although because of different reasons - any answers I've found haven't solved my problem.
Here we go.
I have a nav (unordered list), each list item has it's name attribute matching a file in the directory. When I click on an anchor in the list item, I want to fade out the 'hero' content, load new content and then fade it back in. Here's my code, everything works up until the final step - the content loads in fine but refuses to fade back in (the same code I use to fade back in I've used in a different section of the site and it works fine).
Maybe someone could shed some light?
Javascript:
-
$(document).ready(function() {
$('#nav a').click(function() {
//Get the nav item target filename and set to 'file' variable
file = $(this).attr("name");
//Remove current menu item active declaration
$('.active').removeClass('active');
//Set active declaration to clicked item.
$(this).addClass('active');
//Fade out current visible hero
$("#hero").fadeOut("slow");
//Get HTML from target file
$('#heroWrap').load(file);
//Fade in new HTML
$("#hero").fadeIn("slow");
});
});
Markup:
-
<div id="navWrap">
<ul id="nav">
<li><a href="#" title="#" id="home" class="active" name="1.html">item 1</a></li>
<li><a href="#" title="#" id="story" name="2.html">item 2</a></li>
<li><a href="#" title="#" id="wear" name="3.html">item 3</a></li>
<li><a href="#" title="#" id="prize" name="4.html">item 4</a></li>
<li><a href="#" title="#" id="offer" name="5.html">item 5</a></li>
<li><a href="#" title="#" id="desktop" name="6.html">item 6</a></li>
<li><a href="#" title="#" id="recipies" name="7.html">item 7</a></li>
<li><a href="#" title="#" id="events" name="8.html">item 8</a></li>
</ul>
</div>
<div id="heroWrap">
<div id="hero" class="home">
Initial content
</div>
</div>