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's Introduction中进行了描述（只搜索callback的页面）：

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

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

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

对于实时示例，请查看this jsFiddle，在通过复选框输入或窥视Isotope's Callback Test来源更改过滤器时会发出提醒并搜索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 );

Answer 3

这对我使用Isotope 2.0并不起作用。我也没有使用jQuery，所以也许与vanilla JS的用法不同。

无论哪种方式，如果有人遇到这个问题，我可以使用2.0的事件回调：iso.on('layoutComplete', myFunction)。

有关同位素事件的更多信息：http://isotope.metafizzy.co/events.html

Answer 4

这些都不适合我。我不确定它是否是最新版本的Isotope和/或jQuery 2.1.1。无论如何，我在github找到了解决方案：

$ isotope.bind（＆＃34; transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd＆＃34;，myFunction）;

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

4 个答案: