Changing URL after ajax event.

Changing URL after ajax event.

So I have a navigation I am working on that could be adaptable to any site. You click on a link and new content arrives with fade in / out. Pretty standard. However, I would like the URL to change so it can be copy/pasted and/or bookmarked. The code below works, but the fades don't work. Also, I know this 'breaks the back button' and I plan to tackle that next.


  2. $(document).ready(function() {

  4. $("#nav a").click( function ( event ) {
  6. event.preventDefault();
  8. if ( !$(this).is(".current") ) {
  10. var url = $( this ).attr( "href" );
  12. $( "#nav a" ).removeClass( "current" );
  14. $( this ).toggleClass( "current" );
  15.   
  16. $( "#content-container" ).fadeOut( "slow", function() {
  18. $("#content-container")
  19. .load( url + " .content" )
  20. .fadeIn(1500);

  24. });

  26. window.location.replace(url);
  28. };
  30. });

  33. /* This Ends click */

  35. });
  36. /* This ends jQuery */