0

私は 5 つのポートフォリオ アイテムを持っています。ユーザーが 1 つをクリックすると、プロジェクトの詳細ページがアニメーション化され、ページ上に読み込まれるようにしたいと考えています。今、私はこれがどのように機能するかを簡単に説明しましたが、これが正しい方法かどうかはわかりません. また、このようにすると、さまざまなプロジェクトのさまざまなコンテンツをどのようにロードする必要があるのか​​ わかりません..

ポートフォリオ項目の 1 つがクリックされたときに、ページ全体で非表示の div をアニメーション化するだけです。ここにフィドルがありますので、皆さんはより良いアイデアを得ることができます:

http://jsfiddle.net/MF32t/1/

$(document).ready(function() {
$('.portfolio__project').click(function() { 
    $('.projectDetails').css({"display":"inline"});
    $('.projectDetails').animate({"width":"100%"}, 750);
    $('.projectDetails').delay(500).animate({"height":"100%"}, 750);
});

});

進むべき道ですか？それとも別の方向に考えるべきですか？すぐに使えるコードや動作するコードは必要ありませんが、正しい方向へのプッシュが必要なだけです。

ありがとう！

4

1 に答える 1

0

ajax を使用してコンテンツをロードできます。ドラフトは次のようになります

function loadProject(projectID) {
  $.post(
    "loadProject.php",
    {
      projectID: projectID
    },
    function(content) {
      // Set the content
      $("#content").html(content); // and animations
    }
  );
}

プロジェクトの詳細をメイン コンテナーにのみ読み込むこともできます。ページ全体を非表示にする必要はありません。コンテンツをロードするときは、古いコンテンツをフェードアウトし、新しいコンテンツを設定して新しいコンテンツをフェードインします (たとえば)。ここはあなたの選択です

于 2013-10-09T13:32:57.807 に答える