点击锚标签时淡入淡出

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; 
     }); 
    });