javascript - 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's Introduction 中有描述(只需在页面中搜索 callback):

Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.

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

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

有关实际示例，请查看 this jsFiddle通过复选框输入或窥视更改过滤器时会引发警报 Isotope's Callback Test来源并搜索 changeBGColor。