點擊錨標籤時淡入淡出

Question

我有一個頁面，當點擊我的菜單上的錨點標籤時它會加載php的內容，並且它工作正常。

我一直在努力尋找現在的答案。

我必須使用哪些代碼才能從一個內容淡入到另一個內容？以及我在哪裏添加此代碼？

這裏是我的代碼：

$(document).ready(function() { 
    // Set trigger and container variables 
    var trigger = $('#centerMenu div a'), 
     container = $('#content'); 

    // Fire on click 
    trigger.on('click', function() { 
     // Set $this for re-use. Set target from data attribute 
     var $this = $(this), 
      target = $this.data('target'); 

     // Load target page into container 
     container.load(target + '.php'); 

     // Stop normal link behavior 
     return false; 
    }); 
}); 

Answer 1

試試這個：

$(document).ready(function(){ 
    var trigger = $('#centerMenu div a'), 
    container = $('#content'); 

    trigger.on('click', function(e){ 
     e.preventDefault(); 
     var $this = $(this), 
     target = $this.data('target'); 
     container.fadeOut(500,function(){ 
      container.load(target + '.php', function(){ 
       container.fadeIn(500); 
      }); 
     }); 
    }); 
}); 

注意300ms的是默認的漸變時間。如果需要，我將更改爲500以向您顯示在哪裏進行更改。

Answer 2

您也可以使用此：

$(document).ready(function() { 
     // Set trigger and container variables 
     var trigger = $('#centerMenu div a'), 
      container = $('#content'); 

     // Fire on click 
     trigger.on('click', function() { 
      // Set $this for re-use. Set target from data attribute 
      var $this = $(this), 
       target = $this.data('target'); 

      // Load target page into container 
      container.fadeOut(250); 
      container.load(target + '.php').fadeIn(500); 

      // Stop normal link behavior 
      return false; 
     }); 
    });