jQuery BBQ: Adding transitions like fading, slide, etc

Question

First time asking a question on here, but I use stackoverflow avidly.

I've created a site using jQuery BBQ to load pages in an AJAX fashion, and still be able to track the history with back button, etc...

Out of the box BBQ just uses the .hide() and .show() functions to load in the content. I'm wondering about the best way to modify this for seamless transitions like fading, for example.

Here is the code:

$(function(){

  // Keep a mapping of url-to-container for caching purposes.
  var cache = {
    // If url is '' (no fragment), display this div's content.
    '': $('#home')
  };

  // Bind an event to window.onhashchange that, when the history state changes,
  // gets the url from the hash and displays either our cached content or fetches
  // new content to be displayed.
  $(window).bind( 'hashchange', function(e) {

    // Get the hash (fragment) as a string, with any leading # removed. Note that
    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
    var url = $.param.fragment();

    // Remove .current class from any previously "current" link(s).
    $( 'a.current' ).removeClass( 'current' );

    // Hide any visible ajax content.
    $( '#main' ).children( ':visible' ).hide(1000);


    // Add .current class to "current" nav link(s), only if url isn't empty.
    url && $( 'a[href="#' + url + '"]' ).addClass( 'current' );

    if ( cache[ url ] ) {
      // Since the element is already in the cache, it doesn't need to be
      // created, so instead of creating it again, let's just show it!
      cache[ url ].show(1000);

    } else {
      // Show "loading" content while AJAX content loads.
      $( '.bbq-loading' ).show();

      // Create container for this url's content and store a reference to it in
      // the cache.
     //$('.page:visible').fadeout(1000);
       url  = $( '<div class="page"/>' )

        // Append the content container to the parent container.
        .appendTo( '#main' )

        // Load external content via AJAX. Note that in order to keep this
        // example streamlined, only the content in .infobox is shown. You'll
        // want to change this based on your needs.
        .load( url, function(){
          // Content loaded, hide "loading" content.
          $( '.bbq-loading' ).hide();

        });
    }
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger( 'hashchange' );

});

As you can see I have a .hide(1000) and .show(1000) , but it seems to flash all the content on the page, even elements that are not within the <div id="main"> ...

Any help would be much appreciated. I apologize I can't include the example as it is confidential between myself and the client.

Answer 1

You should go for a combo jquery addClass +css but you can also do it in pure jQuery through fade or animate, like this :

//fadeOut the element
.fadeOut(1000);
.animate({opacity: 0}, 1000);

//fadeIn the element
.fadeIn(1000);
.animate({opacity: 1}, 1000);