2

DIV内にあるphpインクルードページでjQueryまたはCSS（またはその他！）を使用してフェードまたはスライドトランジションを作成しようとしています。私は周りを検索して、互いにdivをフェードしたり、非表示のコンテンツをフェードインしたりするフェードトランジションの例をたくさん見つけましたが、この状況は少し異なります。

ナビゲーションバーによってコンテンツが制御されるDIVが1つあります。各ページは、選択されたときに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>
4

1 に答える 1

2

コメントで人々が言っ​​たように、あなたは毎回ページ全体をリロードしています。

jQuery.loadphpにコンテンツを含める代わりに、APIを使用してコンテンツをロードできます。

PHP：

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

navbarの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コードもクリーンアップすることをお勧めします。

于 2012-09-24T21:07:12.393 に答える