如何在每次點擊和內容時首先顯示加載

Question

我有一個四連接菜單（主頁|關於|解決方案|聯繫人）使用jquery滾動技術每次點擊{Flesler's scrollTo代碼：http://demos.flesler.com/jquery/serialScroll/} {TKYK歷史插件http://tkyk.github.com/jquery-history-plugin/ }。好吧，我的情況是，當我點擊第二個鏈接「about」時，它首先顯示的是setTimeout（），然後顯示正確的內容。無論如何要隱藏以前的內容並顯示某種類型的「加載」，然後顯示新的內容？

這裏是我的init.js代碼：

 
function resize() { 
     var wdt = 1000; 
      var hgt = 500; 
     width = $(window).wdt; 
     height = $(window).hgt; 
     mask_width = width * $('.item').length; 
     $('#debug').html(width + ' ' + height + ' ' + mask_width); 
     $('#container,.item').css({width: width, height: height}); 
     $('#mask').css({width: mask_width, height: height}); 
     $('#container').scrollTo($('a.selected').attr('href'),0); 
}
 

$(document).ready(function() { 
      // scroll x-axis content 
      $('a.panel').click(function() { 
       $('a.panel').removeClass('selected'); 
       $(this).addClass('selected'); 
       current = $(this); 
       $('#container').scrollTo($(this).attr('href'),1000,{ easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy' }); 
         return false;
 

 }); 
     $(window).resize(function() { resize(); }); 


    // hash history 
    function load(num) { $('.content').load(num); } 
       $.history.init(function(url) { load(url == "" ? "home" : url); }); 
       $("a[rel='history']").click(function(e) { 
       var url = $(this).attr('href'); 
       url = url.replace(/^.*#/,"!/"); 
     setTimeout(function() { 
       $.history.load(url); 
      },1000); 
       return false; 
     }); 

}）;

Answer 1

我沒有得到肯定的問題，但我認爲這將有助於你：

$('a.panel').click(function() { 
    $('a.panel').removeClass('selected'); 
    $(this).addClass('selected'); 
    $('a.panel').not($(this)).each(function() { 
     $($(this).attr("href")).hide(); 
    }); 
    // show your loading here 
    current = $(this); 
    $(current.attr("href")).show() 
    $('#container').scrollTo($(this).attr('href'),1000,{ easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy', onAfter: function() { //hide your loading here } }); 
    return false; 
}); 

這包括對hidding所有從你的菜單上的鏈接的容器，顯示加載，顯示集裝箱你意在顯示並隱藏加載。

編輯：

也許你甚至需要加載...剛剛從scrollTo選項刪除onAfter。