使用PHP時的淡入淡出轉換包含

Question

我試圖使用jQuery或CSS（或其他！）在包含在DIV中的頁面上創建淡入淡出或幻燈片轉換。我搜索了四處，發現了大量淡入淡出過渡的例子，淡入淡出或隱藏內容，但這種情況稍有不同。

我有一個DIV，其內容由導航欄控制。使用PHP時，每個頁面都被成功包含在div中，但是我想讓內容淡入淡出。

有關如何在頁面更改之間進行漂亮的轉換的任何想法？

非常感謝

代碼：

<?php 
    if (isset($_GET['page'])) 
    $page = $_GET['page']; 

    else { 
      $_GET['page'] = 1; 
      $page = $_GET['page']; 
} 
?> 

，然後頁面都包含在像這樣一個div：

<div id="content"> 
     <?php switch($page) 
    {  
      case "about": 
      include('includes/about.php'); 
      break; 

      case "portfolio": 
      include('includes/portfolio.php'); 
      break; 

      case "contact": 
      include('includes/contact.php'); 
      break; 

      default: 
       include('includes/home.php'); 
      } 
?> 
    </div> 

的內容是從導航欄選擇：

<ul> 
    <li><a href="m_index.php?page=home"><img src="" width="32" height="32" alt="Home"/></a></li> 
    <li><a href="m_index.php?page=about"><img src="" width="32" height="32" alt="About" /></a></li> 
    <li><a href="m_index.php?page=portfolio"><img src="" width="32" height="32" alt="Portfolio" /></a></li> 
    <li><a href="m_index.php?page=contact"><img src="" width="32" height="32" alt="Contact Us" /></a></li> 
</ul> 

Answer 1

像peo ple在評論中說，你每次都重新加載整個頁面。

您可以使用jQuery.load API來加載內容，而不是將它們包含在php中。

PHP：

<div id="content"> 
    <?php 
    // load home by default - the rest will be loaded via AJAX 
    include("includes/home.php"); ?> 
</div>​ 

HTML的導航欄：

<ul id="links"> 
    <li><a href="m_index.php?page=home"><img src="" width="32" height="32" alt="Home"/></a></li> 
    <li><a href="includes/about.php"><img src="" width="32" height="32" alt="About" /></a></li> 
    <li><a href="includes/portfolio.php"><img src="" width="32" height="32" alt="Portfolio" /></a></li> 
    <li><a href="includes/contact.php"><img src="" width="32" height="32" alt="Contact Us" /></a></li> 
</ul> 
​ 
​ 

使用jQuery，你做這樣的事情：

$(document).ready(function() { 
    $('#links a').click(function(e) { 
     e.preventDefault(); // we'll get the pages via ajax. 

     var url = $(this).attr('href'); // use href as url to loag 

     $.ajax({ 
      url: url, 
      success: function(data) { 

       // when ajax is done, fade old content out 
       $('#content').fadeOut(function() { 

        $(this).html(data); // replace contents 

        // fade new content in 
        $(this).fadeIn(); 
       }); 
      } 
     }); 
    }); 
});​​​​ 

我沒有測試過的jQuery代碼，但它應該工作（或給你一些想法）。 如果一切順利，您可能還想清理php代碼。