jquery同位素过滤器完成后触发警报

Question

我有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;
  });

Answer 1

从v1.5(changelog)开始,Isotope提供了一个回调来做到这一点; 它在Isotope的介绍中描述(只需搜索页面callback):

此外,您可以在options对象之后指定回调.动画完成后将触发此功能.

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

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

对于实例,请看一下这个jsFiddle,它在通过复选框输入或窥视Isotope的回调测试源并搜索时更改过滤器时会发出警报changeBGColor.

Answer 2

他们都没有为我工作。相反，我使用了事件部分中解释的内容：http : //isotope.metafizzy.co/events.html

function onLayout() {
        // What to do when layout fully rendered
    }
    // bind event listener
    $isotope.isotope( 'on', 'layoutComplete', onLayout );