jQuery fadeOut callback function not being called

Question

I am trying to swap divs by fading them in and out when another div is clicked. The only problem is: first the callback function wouldn't get called, so I took it out completely and the divs are acting funny now. Meaning when I click one of the divs the corresponding div that should fadeIn doesn't and the div that should have fadedOut did not.

HTML:

<ul id="tour"> 
   <li id="pitch_link" class="selected">
      <h1>Pitch</h1>
      <p>Pitch a ball.</p>
   </li>
   <li id="publish_link">   
      <h1>Publish</h1>
      <p>Publish the spin.</p>
   </li>     

<div id="pitch">  
  <ul>
    <li><h2>pitch Stuff</h2></li>
    <li><h2>Graphics</h2></li>
  </ul>
</div>

<div id="publish">  
  <ul>
    <li><h2>publish Stuff</h2></li>
    <li><h2>Graphics</h2></li>
  </ul>
</div>

jQuery w/out callback:

$("#tour li").click( function(event) {

    if( !$(this).is( ".selected" ) ) {

        // find the link that was previously selected and fade it out
        var prevSelectedLink = $(".selected").attr( 'id' );
        prevSelectedID = "#" + prevSelectedLink.substr( 0, prevSelectedLink.length-5 );

        // fade the previously selected div out
        $(prevSelectedID).fadeOut( "fast" );

        // Deselect the previously selected link (remove selected class)
        $(prevSelectedLink).removeClass( "selected" );  

        // Select the new Link          
        $(this).addClass("selected");

        // Fade the new div content in
        var linkID = $(this).attr( 'id' );  // linkID = pitch_link
        contentID = "#" + linkID.substr( 0, linkID.length-5 );  // contentID = #pitch

        $(contentID).fadeIn( "slow" );  

    }
});

jQuery w/ callback: if( !$(this).is( ".selected" ) ) {

// find the link that was previously selected and fade it out
var prevSelectedLink = $(".selected").attr( 'id' );
        prevSelectedID = "#" + prevSelectedLink.substr( 0, prevSelectedLink.length-5 );

        // fade the previously selected div out
        $(prevSelectedID).fadeOut( "fast" , function() {

            // Deselect the previously selected link (remove selected class)
            $(prevSelectedLink).removeClass( "selected" );  

            // Select the new Link          
            $(this).addClass("selected");

            // Fade the new div content in
            var linkID = $(this).attr( 'id' );  // linkID = pitch_link
            contentID = "#" + linkID.substr( 0, linkID.length-5 );  // contentID = #pitch

            $(contentID).fadeIn( "slow" );
        }); 

    }
});

Answer 1

Without the CSS, I can't really tell what the problem is but the code can be cleaned up like so:

$('#tour li').click(function(){

   if( !$(this).hasClass('selected') ){

       //Get the ID of the DIV you want to show
       var div_id = $(this).attr( 'id' ).replace('_link','');
       $('#tour li').removeClass('selected');
       $(this).addClass('selected');

       $('div').fadeOut("fast", function(){
            $('#'+div_id).fadeIn("fast");
       });

   }else{
       return false;
   }

});

I haven't tested this but what it does is if the link is not selected, it gets the ID of the div using the link ID, removes the 'selected' class from all other links and adds the 'selected' class to the li clicked. All div's are then faded out and finally the required div is faded In.

You can also use the .not() operator to prevent the fadeOut() for the div with 'div_id'.

Answer 2

This is the code I ended up with that worked thanks a lot to Sagar.

$("#tour li").click( function(event) {

    // make sure we are not already selected
    if( !$(this).hasClass( "selected" ) ) {

        // find the tab link that was previously selected and the corresponding div content
        var prevTab = '#' + $(".selected").attr( 'id' );    // prevTab = #pitch_link
        prevTabCont = prevTab.replace( '_link', '' );   // prevTabCont = #pitch

        // Deselect the previously selected tab link (remove selected class)
        $(prevTab).removeClass( "selected" );   

        // Find the currently selected tab and its corresponding div content
        var selectedTab = '#' + $(this).attr( 'id' );   // selectedTab = #publish_link
        selectedTabCont = selectedTab.replace( '_link', '' );   // selectedTabCont = #publish

        // Make the tab link selected       
        $(this).addClass("selected"); // this -> #publish_link

        // fade the previously selected div out
        $(prevTabCont).fadeOut( "slow", function() {                        
            $(selectedTabCont).fadeIn( "slow" );
        });
    }

});