2

我有 jquery isotope setup 并创建了一些过滤器。当我创建我选择一个过滤器时，同位素会做一个很好的小动画。我想在动画结束时触发警报。

此示例演示了发生的动画：

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 的介绍中有所描述（只需搜索页面callback）：

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

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

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

对于实时示例，请查看此 jsFiddle，它在通过复选框输入更改过滤器或窥视Isotope 的回调测试源并搜索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 回答
1

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

$isotope.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", myFunction);

于 2014-11-10T20:10:38.933 回答