古いコンテンツを削除して新しいコンテンツを読み込み、JQueryで新しいコンテンツをアニメーション化する

Question

私はJavaScriptの初心者であることを謝罪します。私は私のウェブサイトのデザインを増強するためにJQueryのいくつかの側面を取り上げましたが、基本や構文を正しく学んだことはありませんでした。

ここで私がしたいことがあります：ユーザーがリスト内のリンクをクリックすると、div #contentは#contentの高さだけ画面の上からアニメーション表示されます。次に、#contentが非表示になります。 #contentは、ユーザーが#navでクリックしたリンクにリンクされているページから読み込まれた新しいコンテンツに置き換えられます。 #contentを非表示にしてから、ビューポートの高さだけ画面の下を移動する必要があります。その後、#contentが表示され、元の場所にアニメーション表示されます。以下は私が嘲笑したコードですが、正しく動作していません。

ありがとうございます！

$(document).ready(function() { 

$('#nav li a').click(function(){ 

    var toLoad = $(this).attr('href')+' #content'; 

    var oldHeight = $('#content').css("height"); 

    var viewportHeight = $(window).height(); 

    $('#content').animate({ 
     top: "-" + oldHeight 
    }, 'slow'); 

    $('#content').hide(); 

    $('#content').load(toLoad); 

    $('#content').animate({ 
     top: viewportHeight + "px" 
    }); 

    $('#content').show(); 

    $('#content').animate({ 
     top: "0px" 
    }, 'slow'); 

    return false; 

}); 

}); 

Answer 1

何が

load()

が非同期である...それが何かをロードするだけで、あなたの load()後、すべてを実行することを求めているし、それが言うところあなたは、 jQuery website方法の完全なシグネチャを見ることができます負荷が完了したときに起動する functionを追加することができます。あなたの例から

ちょうどそのメソッド内でごload()後にすべてをかける...

最終的な結果は次のようになります。

var clickedAnchors = []; 

$(document).ready(function() { 

    $('#nav li a').click(function() { 

     var toLoad = $(this).attr('href')+' #content';   
     var oldHeight = $('#content').css("height");   
     var viewportHeight = $(window).height(); 

     $('#content').animate({ 
      top: "-" + oldHeight 
     }, 'slow', function() { 

      $('#content').hide();   
      $('#content').load(toLoad, function() { 


      $('#content').animate({ 
       top: viewportHeight + "px" 
      }); 

      $('#content').show();   
      $('#content').animate({ 
       top: "0px" 
      }, 'slow'); 

      }); // close load 

     }); // close animate 

     return false; 

    }); // close selector 
}); // close document.ready 

は、jQueryののよりよい特徴の一つは、そう、カスケード接続されていることを忘れないでくださいあなたのコードは実際に次のようになります：

var clickedAnchors = []; 

$(document).ready(function() { 

    $('#nav li a').click(function() { 

     var currentId = $(this).attr('id'); 

     if($.inArray(currentId, clickedAnchors) < 0) { 
     // this anchor was not yet clicked 

     var toLoad = $(this).attr('href')+' #content',   
      oldHeight = $('#content').css("height"),   
      viewportHeight = $(window).height(); 

     $('#content').animate({ top: "-" + oldHeight }, 'slow', function() { 

      // after animated is completed 
      $('#content') 
       .hide() 
       .load(toLoad, function() {  

        $(this).animate({ top: viewportHeight + "px" }, function() { 

         // after animation has completed 
         $(this) 
          .show() 
          .animate({ top: "0px" }, 'slow'); 

        }); 
       }); 
     }); 

     // remove this anchor from being clicked again, 
     // so let's add it's id into the array 
     clickedAnchors.push(currentId); 
     } 

     return false; 

    }); 
}); 

Answer 2

あなたのアニメーションにコールバック機能を使用して、オーダー：あなたがこれを行う場合は

$(function() { 

    $('#nav li a').click(function(){ 

     //notice I used commas to separate the variable declarations, and I cached the `#content` selection since it will be used several times 
     var toLoad   = $(this).attr('href') + ' #content', 
      oldHeight  = $('#content').css("height"), 
      viewportHeight = $(window).height(), 
      $content  = $('#content'); 

     //animate the element out-of-view 
     $content.animate({ 
      top : "-" + oldHeight 
     }, 'slow', function() { 

      //once the animation is complete, load the new data via AJAX 
      $content.load(toLoad, function() { 

       //once the AJAX request is complete, then animate the element back into view 
       $content.animate({ 
        top : "0px" 
       }, 'slow'); 
      }); 
     }); 

     return false; 

    }); 

}); 

：

$('#content').animate({ 
     top: "-" + oldHeight 
    }, 'slow'); 

    $('#content').hide(); 

をアウト・オブ・ビューの要素をアニメーション化するために750msのように取るように言っているが、あなたは即座に「要素display : noneを与える」、と言っていますしたがって、.animate()コールが終了する前に、要素は.hide()で隠されています。これがコールバックを使用する理由です。あなたはjQueryオブジェクト上で2つの以上の機能を実行しようとしている場合、

また、あなたがすべきチェーン機能を再選択する要素（複数可）を呼び出しいうより：動作していないかを説明

$('#content').animate({ 
     top: "-" + oldHeight 
    }, 'slow').css({ color : '#fff' });