Quicksand jqueryプラグインは要素を簡単に拡大します。どうして？

Question

私は現在、タグに基づいて特定の要素を隠して表示することで、ページ上の要素をアニメートできるjqueryプラグインQuicksandを使用しようとしています。私はうまく働いている。私の問題は、要素がイージングしているときに、移動中に要素が大きくなることです。一度彼らは彼らの場所に定住すると、彼らは適切なサイズに縮小するが、それはひどく奇妙に見え、私はこれが最初に起こっている理由を考えてみたいと思います。

$(document).ready(function() { 

    // get the action filter option item on page load 
    var $filterType = $('#filterOptions li.active a').attr('class'); 

    // get and assign the ourHolder element to the 
    // $holder varible for use later 
    var $holder = $('ul.ourHolder'); 

    // clone all items within the pre-assigned $holder element 
    var $data = $holder.clone(); 

    // attempt to call Quicksand when a filter option 
    // item is clicked 
    $('#filterOptions li a').click(function(e) { 
     // reset the active class on all the buttons 
     $('#filterOptions li').removeClass('active'); 

     // assign the class of the clicked filter option 
     // element to our $filterType variable 
     var $filterType = $(this).attr('class'); 
     $(this).parent().addClass('active'); 

     if ($filterType == 'all') { 
      // assign all li items to the $filteredData var when 
      // the 'All' filter option is clicked 
      var $filteredData = $data.find('li'); 
     } 
     else { 
      // find all li elements that have our required $filterType 
      // values for the data-type element 
      var $filteredData = $data.find('li[data-type~=' + $filterType + ']'); 
     } 

     // call quicksand and assign transition parameters 
     $holder.quicksand($filteredData, { 
      duration: 800, 
      easing: 'easeInOutQuad' 
     }); 
     return false; 
    }); 
}); 

流砂ファイル自体を私は 『幅「に高さのドキュメント内の』すべてを変えたことを除いて、同じことを続けている。ここで

は流砂のための私の好みを持っているmain.jsファイルがあります私はdivのいずれかに指定された高さを持っていないためです。

ありがとうございました！この問題を解決するには、HTMLまたはCSSを参照する必要があるかどうかを教えてください。

Answer 1

これは、使用しているイージング機能のために起こっています：easeInOutQuad。

これは、アニメには驚異的なバウンスを与えます。

は、参考のためにここを参照してください：http://gsgd.co.uk/sandbox/jquery/easing/

編集：

あなたは開始以来、あなたの問題を発見しました。私はあなたのページをデバッグし、パーセンテージ対策が問題であることを発見しました。

サイトから：あなたの項目とそのコンテナをスタイリングhttp://razorjack.net/quicksand/docs-and-demos.html

CSS勧告
1.When、CSSクラスを使用してください。 IDを使用すると、奇妙な結果につながる可能性があります。クイックとコンテナをクローンして、アニメーションの宛先フレームをシミュレートします。同じIDの2つの要素が存在することは不可能なので、コンテナIDを使用してアイテム/コンテナをスタイリングするのは避けてください。
2.クイズは、身体、容器、および収集品目の余白を知る必要があります。これらの要素に余白がある場合は、emではなくpx（ピクセル）を使用してください。プラグインは現在emを理解していません。

この同じケースにパーセンテージが含まれていると思います。