0

クリックするとボックスが展開する石積みスタイルのページを作成しています。別のボックスをクリックすると、他のすべてのボックスがデフォルトで元のサイズになるように、JavaScript コードを作成しました。つまり、一度に 1 つのボックスのみが展開されます。

それはうまくいきます！

問題は、同位体はボックスのサイズ変更をアニメーション化せず、再配置のみをアニメーション化することです!

そのため、jquery UI プラグインを呼び出してトグル クラス関数をアニメーション化しました。これにより、要素の再配置だけでなく、要素自体の拡張もアニメーション化されます。

しかし残念なことに、jquery UI と isotope の何かが完全に適合していません。つまり、要素の再配置がうまくいかないということです。

例の JavaScript コードは次のとおりです。

最初に機能するもの：

    $(document).ready(function() {

    var $container = $('#masonrycontainer');

    $($container).isotope({
            masonry : {
            columnWidth : 100
        }
    });

    // change size of clicked element
    $container.delegate( '.isotopeelement', 'click', function(){
    $('.isotopeelement').not(this).removeClass('maxsize');
    $(this).toggleClass('maxsize');
    $container.isotope('reLayout');
    return false;
  });

});

次に、機能しないもの (ミリ秒が 2 つの例の唯一の違いであることに注意してください):

    $(document).ready(function() {

    var $container = $('#masonrycontainer');

    $($container).isotope({
            masonry : {
            columnWidth : 100
        }
    });

    // change size of clicked element
    $container.delegate( '.isotopeelement', 'click', function(){
    $('.isotopeelement').not(this).removeClass('maxsize', 300);
    $(this).toggleClass('maxsize', 300);
    $container.isotope('reLayout');
    return false;
  });

});

誰が問題が何であるか、またはそれを解決する方法を知っていますか? よろしくお願いします。

//A.

4

1 に答える 1

1

同位体 - 項目サイズのアニメーション化を参照してください。直面している問題に関する 4 分間のビデオが特徴です。

于 2011-09-16T13:59:54.653 に答える