2

jqueryアイソトープを設定し、いくつかのフィルターを作成しました。作成するときにフィルターを選択すると、アイソトープは素敵な小さなアニメーションを実行します。アニメーションの最後にアラートをトリガーしたい。

この例は、発生するアニメーションを示しています。

http://isotope.metafizzy.co/demos/filtering.html

何か案は？

フィルタをクリックしたときのコードは次のとおりです。

$('.filter').on( 'click', 'a', function( event ) {
        event.preventDefault();
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }

        // console.log('hello world');
        var $optionSet = $this.parents('.option-set');
        var group = $optionSet.attr('data-filter-group');
        options.comboFilters[ group ] = $this.attr('data-filter-value');
        $.bbq.pushState( options );

        // COUNT
        var $filtered = $('#isotope-container').data('isotope').$filteredAtoms;
        // get count of all filtered item
        alert($filtered.length);
        // get count of all filtered items that match a selector
        //$filtered.filter('.blue').length;
  });
4

4 に答える 4

9

v1.5 ( changelog ) 以降、Isotope はそれを行うためのコールバックを提供しています。Isotope's Introductionで説明されています (ページで を検索してくださいcallback):

さらに、オプション オブジェクトの後にコールバックを指定できます。この関数は、アニメーションが完了した後にトリガーされます。

onAnimationFinished = function(){
  // code to be executed after the animation finishes
};

$('#container').isotope({ filter: '.my-selector' }, onAnimationFinished);

実際の例については、この jsFiddle を参照してください。この jsFiddleは、チェックボックスの入力を介してフィルターを変更するときにアラートをスローするか、Isotope の Callback Testソースを覗き込んで を検索しchangeBGColorます。

于 2012-10-04T01:20:34.100 に答える
5

それらのどれも私のために働きませんでした。代わりに、イベント セクションで説明されている内容を使用しました: http://isotope.metafizzy.co/events.html

function onLayout() {
        // What to do when layout fully rendered
    }
    // bind event listener
    $isotope.isotope( 'on', 'layoutComplete', onLayout );
于 2014-05-26T13:36:11.847 に答える
3

これは、Isotope 2.0 を使用した場合には機能しませんでした。jQueryも使っていないのでバニラJSとは使い方が違うのかもしれません。

いずれにせよ、誰かがこの問題に遭遇した場合、私は 2.0 のイベント コールバックを使用して動作するようにしましたiso.on('layoutComplete', myFunction)。

同位体イベントの詳細: http://isotope.metafizzy.co/events.html

于 2014-05-18T19:22:48.120 に答える