0

現在、タグに基づいて特定の要素を非表示および表示することにより、ページ上の要素をアニメーション化できる jquery プラグインである Quicksand を使用しようとしています。私はそれがうまく機能しています。私の問題は、要素が緩和されると、移動中に拡大することです。落ち着くと適度な大きさに縮むのですが、見た目がとても奇妙で、そもそもなぜこうなったのかを突き止めたいと思います。

これは、流砂の好みを含む main.js ファイルです。

$(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;
    });
});

Quicksand ファイル自体は同じままですが、ドキュメント内のすべての「高さ」を「幅」に変更したのは、どの div にも高さが指定されていないためです。

ご協力ありがとうございました！問題を解決するために HTML または CSS が必要な場合はお知らせください。

4

1 に答える 1

0

これは、使用したイージング関数が原因で発生しています: easeInOutQuad。

アニメーションにインバース バウンスの側面を与えます。

参考までにこちらをご覧ください: http://gsgd.co.uk/sandbox/jquery/easing/

編集：

あなたは最初からあなたの問題を見つけました。お客様のページをデバッグしたところ、パーセンテージの測定に問題があることがわかりました。

サイトから: http://razorjack.net/quicksand/docs-and-demos.html

CSS の推奨事項
1.アイテムとそのコンテナのスタイルを設定するときは、CSS クラスを使用してください。ID を使用すると、奇妙な結果が生じる場合があります。Quicksand はコンテナーを複製して、アニメーションの宛先フレームをシミュレートします。同じ ID の 2 つの要素が存在することは不可能であるため、コンテナー ID を使用してアイテム/コンテナーをスタイリングすることは避ける必要があります。
2.Quicksand は、body、container、および collection アイテムの余白を知る必要があります。これらの要素に余白がある場合は、ems ではなく px (ピクセル) を使用してください。プラグインは今のところ ems を理解していません。

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

于 2012-05-07T22:01:57.520 に答える