Animate content on click

[jorveld]

Hi,

I am fairly new to jquery and would like to know if this is a legitimate way to achieve what I want.

I am trying to animate the content when a user clicks a link, then go to the url, and slide the content down again.

I Think this way has advantages (correct me if I’m wrong):

– This way I don’t have dymanic content. (SEO)
– Clean url’s (like http://www.somesite.com/about/philosophy/),
– Back button works
– The site will function when js is disabled.

To achieve this I created the following code:

	 $('#content').hide();//hide the content div

$('#subnavext, #subinfo').hide();//hide sidenav

$('#content').slideFadeToggle(1000);//slide the content down

$('#subnavext, #subinfo').fadeIn(1000);//this fades in extra navigation if there is any



var $content = $('#content');



/* this happens when u user clicks the main nav */



$('#menu a').click( function(ev){

ev.preventDefault();

var $self=$(this);

$('#subnavext, #subinfo').fadeOut(1000);

$content.slideFadeToggle(1000, function(){

document.location = $self.attr('href');

}); $('#content').slideFadeToggle(2000);//TO MAKE FIREFOX BACK BUTTON WORK

$('#subnavext, #subinfo').fadeIn(2000);//TO MAKE FIREFOX BACK BUTTON WORK



});



/* This happens when a user clicks the sidenav   */



$('#subnavext a').click( function(ev){

ev.preventDefault();

var $self=$(this);

$content.slideFadeToggle(700, function(){

document.location = $self.attr('href');

});$('#content').slideFadeToggle(2000);//TO MAKE FIREFOX BACK BUTTON WORK

});

Please give me some feedback, Can I do this like this or are there easier way’s

Thanx,

[jorveld]

Nobody ideas?

[Mottie]

I hate to say it but making a user wait 1-3 seconds for a link to take them to the page they want will frustrate them and make most find another source for their information.

The way the code looks, even clicking an external link would make them wait. If it was me, I’d just close the tab and start over. I’m not saying I’m impatient, but I’m not going to wait around for an animation delay to show me stuff I want to see, especially if I have to search more than one link for it.

[jorveld]

@Mottie I understand you (it’s a 2 sec whait) completely but thats what I am stuck with (That’s what the customer wants). (btw external links are not animated).

My main question is if this is the best (fastest) way to achieve what I want. I already changed the code slightly:

css:

#content { display:none; }

js:

window.addEventListener(‘unload’, UnloadHandler, false);//back button FF and Safari

function UnloadHandler() {

//do nothing

}
var $content = $(‘#content’);

/*content fade in and out*/
$content.slideDown(1000);
$(‘#subnavext, #subinfo’).fadeIn(1000);

$(‘#menu a, #subinfo a, #postit a, #slider a, #sitemap a’).click( function(ev){
ev.preventDefault();
var $self=$(this);
$(‘#sitemap’).slideUp(800);
$(‘#subnavext, #subinfo, #postit’).fadeOut(1000);
$content.slideUp(1000, function(){
document.location = $self.attr(‘href’);
});
});

$(‘#subnavext a, #full-information a’).click( function(ev){
ev.preventDefault();
var $self=$(this);
$(‘#sitemap’).slideUp(800);
$content.slideUp(700, function(){
document.location = $self.attr(‘href’);
});
});

[Author]

Posts