7


展開可能なアイテムで同位体 ( http://isotope.metafizzy.co ) を使用しています。新しく展開されたアイテムに自動的にスクロールできるように、ScrollTo を使用したいと思います。

私は最初に、次のような reLayout メソッドでコールバックを使用しようとしました。

container.isotope('reLayout', iwannascroll(origin));

function iwannascroll(origin_with_newpos){
    $.scrollTo(origin_with_newpos, 800);                
}

origin は、クリック ハンドラから「this」を配置する変数です。
残念ながら、私は常にオブジェクトの古い位置を取得します..

実際、コールバックが呼び出されるのが早すぎるのか、それとも jQuery オブジェクトを保存するとコピーや「ポインター」のようになるのか理解できないのかわかりません;-)

何か考えはありますか？

編集:アニメーションが終了する前にコールバックが呼び出されることを確信したので、私の質問は次のようになります:アニメーションが終了したらどうすればよいですか?

4

5 に答える 5

7

大丈夫、

同位体コードに忍び込んで、アニメーション オプションが animate jquery メソッドに直接渡されていることがわかったので、これらのオプションに完全なコールバックを追加しました。

animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: iwannascroll
}

次に、展開されたオブジェクトをフィルタリングしてスクロールすることができました：

            function iwannascroll(){
                var target = $(this);
                if (target.hasClass('expanded'))
                    $.scrollTo(target, 800);                
            }

明らかに、アニメーションにjQuery animateメソッドを使用する場合にのみ機能します..誰かがより良い「普遍的な」方法を知っているなら、私はそれを聞きたいです;）

于 2011-03-25T15:18:01.343 に答える
5

Isotope reLayout のコールバックが実際に起動するのが早すぎます。

bind を使用して、アニメーションがいつ終了したかを検出しました。

jquery と css アニメーション エンジンの両方で動作します。

$("#isotope").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){

});

ps: もちろん、これは通常の同位体コードの後に​​配置する必要があります。

こんにちは、マヌエル

于 2013-05-21T20:41:33.950 に答える
2

私は最近、animationOptions/complete-function を使用してあなたのアイデアを実装しようとしましたが、正しく動作しませんでした。それが私がこれを思いついたときで、これらのjqueryコマンドを同位体呼び出しに直接追加することでアニメーションを完成させました..

レイアウト/組積表示用の最初のロード同位体:

container.isotope({
    itemSelector: '.selector',
    masonry: {
        columnWidth: smallWidth,
    }
});

..そして、2 番目の呼び出しで、クリック関数内に reLayout/resizing を含めます。

$('.selector').click(function(){
var $this = $(this),
    tileStyle = $this.hasClass('large') ? { width: smallWidth } : { width: largeWidth };
$this.toggleClass('large');     
$this.find('.selector').stop().animate( tileStyle );   

    // Here we search for the enlarged isotope-selector and apply the scroll
    // function to it...the item position is available to jquery at this point.
$container.isotope( 'reLayout' ).find($this).each(function() {
    var target = $(this);
    if (target.hasClass('large'))
                $.scrollTo(target, 800,{offset:-50});
    });
});

...コードが完全ではなく、自動スクロールが最初にクリックされたアイテムでのみ機能することはわかっていますが、すでに1つ以上の拡大アイテムがある場合は機能しません。誰かがこれを拡張する方法について考えているかもしれません。

于 2011-07-01T12:22:36.393 に答える
2

このハックをコールバックに使用します。多分それはあなたのために働く.

setTimeout(function(){
        $container.isotope('reLayout');
    }, 1000);
于 2013-05-10T13:04:31.710 に答える
1

コンテナーの webkitTransitionEnd イベントと transitionend イベントを animationOptions.complete コールバックと結び付けて、ブラウザー間で目的の結果を得ることができました。これらの 3 つで実行される共通の関数を使用して、そこに必要なロジックを配置できます。

于 2011-08-02T13:58:39.347 に答える