animated menu help!
animated menu help!
hi and thanks in advance for any help,
im working on my portfolio site and ive come to a bit of a wall. i have a main navigation which, when clicked animates a div containing my content to be visible. i have this working fine but now i want to have external content loaded into this containing div when different navigation items are clicked, which i also have working, but i can not get these to work together.
first off, if the div is not shown i want the appropriate content to be loaded then the div to animate, and if the div is showing, i want it to hide, swap the content then animate.
im sure its just a case of structuring my code properly but i just cant seem to get it right.
show the div
-
$(document).ready //content animate show
(
function()
{
$('.navigation a').click
(
function()
{
$('.content').stop().animate
({
marginTop : "0px"
},{
easing : "easeOutQuint",
duration : 2000
})
}
);
}
)
hide the div
-
$(document).ready //content animate hide
(
function()
{
$('#hide').click
(
function()
{
$('.content').stop().animate
({
marginTop : "200px"
},{
easing : "easeInQuint",
duration : 1500
})
}
);
}
)
and finally swap the content
-
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('.navigation a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php .content';
$('.content').load(toLoad)
}
});
$('.navigation a').click(function()
{
var toLoad = $(this).attr('href')+' .content';
$('.content').fadeOut('fast',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent()
{
$('.content').load(toLoad,'',showNewContent())
}
function showNewContent()
{
$('.content').fadeIn('fast');
}
return false;
});
});
so much as a push in the right direction would be greatly apreciated
thanks!