$(document).ready(function() {

    $( "#t2" ).hide();
    $( "#t3" ).hide();
    $( "#t2" ).css( "diplay", "block" ); 
    $( "#t3" ).css( "diplay", "block" ); 
    
    setTimeout( showT2, 10000 );
    
    
    
  
});

/**
 *
 * Could have done this recursively but I am too lazy.
 *
 */   
function showT1() {
  $("#t3").fadeOut( "slow" );
  setTimeout( '$("#t1").fadeIn( "slow" );', 1000 );
  setTimeout( 'showT2()', 10000 );
}

function showT2() {
  $("#t1").fadeOut( "slow" );
  setTimeout( '$("#t2").fadeIn( "slow" );', 1000 );
  setTimeout( 'showT3()', 10000 );
}



function showT3() {
  $("#t2").fadeOut( "slow" );
  setTimeout( '$("#t3").fadeIn( "slow" );', 1000 );
  setTimeout( 'showT1()', 10000 );
}