-2

私はこのサイトのスライドワンを見ています。リンクをクリックすると、同じコンテナ/div/使用しているものにコンテンツが読み込まれます。私は自分のサイトでこのようなものを手に入れることができるかどうか疑問に思っていましたが、これを行う方法がわかりません. 何か助けはありますか？

4

2 に答える 2

2

コンテンツの非表示と表示が混在しています。別のセクションをロードするリンクを操作すると、次のことが起こります。

  • リクエストは ajax 経由でサーバーに送信され、サーバーは html を返します。
  • 親のコンテンツをフェードアウトし、サーバーから受信した HTML を非表示の div に追加します
  • Fadeinの新しいコンテンツ
  • すごいね

編集

これは、このようなことを本当に簡単に行う方法を始めるための素晴らしいリンクです

編集 2: jQuery の作業の概要は次のとおりです。

$(function(){
    $(".exposer").click(function(){
        var $ele = $(this);
        $ele.parent().siblings().hide('fade');
        if($(this).data('url') == undefined){
       $(this).siblings('.visContent').hide('slide')
           $(this).siblings('.hidContent').show('slide'); 
        }else{
            var url = $(this).data('url');
            $.ajax({
                url: '/echo/json',
                type: "GET",
                success:function(data){
                    var dt = new Date();
                    data = "You would have loaded HTML from " + url + ".<br /> This was loaded at " + dt;
                    //You would normally use the HTML from data to populate the html
                    //in this example a pre-built string will suffice
                    console.log(data,$ele, url);
               $ele.siblings('.visContent').hide('slide');
               $ele.siblings('.hidContent').append("<div class='ajaxload'>" + data + "</div>").addClass('ajaxload').show('slide');            
                },error:function(xhr, status){
                  alert('error loading page');
                }                    
            })
        }
    });
    $(".closer").live('click',function(){
        $(".ajaxload").hide('fade');
       var $mainp = $(this).parent().parent(); 
        $(this).parent().hide('slide');
        $(this).parent().parent().children('.visContent').show('slide');
                $(this).parent().parent().siblings('.childWrap').show('slide');
    });
});

この基本がどのように機能するかを示すフィドルを作成しました。 ここに私が構築したフィドルの例があります

于 2012-11-30T04:27:31.707 に答える
0

この jQuery ウェイポイント プラグインは、開始するのに適した場所です。スクロールを簡単に監視したり、特定のポイントで ajax イベントを起動したり、特定のスクロール ポイントでメニューで選択されているものを変更するイベントを起動したりできます。

単純なバージョンで問題がなければ、他のイベントが発生することなく、サイトのようにいつでもアニメーション化して別のポイントにスクロールできます

于 2012-11-30T04:32:56.923 に答える