jquery 插件 Isotope 的回调

Question

我正在使用同位素 ( http://isotope.metafizzy.co ) 和可扩展项目，我想使用 ScrollTo 以便我可以自动滚动到新展开的项目。

我首先尝试将回调与 reLayout 方法一起使用，例如：

container.isotope('reLayout', iwannascroll(origin));

function iwannascroll(origin_with_newpos){
    $.scrollTo(origin_with_newpos, 800);                
}

origin 是一个变量，我从单击处理程序中放置“this”。
不幸的是，我总是得到对象的旧位置。

实际上，我不确定回调是否被调用得太早，或者我是否无法理解存储我的 jQuery 对象如何使其更像一个副本或“指针” ;-)

有什么想法吗？

编辑：我现在确定回调是在动画结束之前调用的，所以我的问题是：我现在如何才能完成动画？

Answer 1

好吧，

潜入同位素代码，我发现动画选项直接传递给 animate jquery 方法，所以我向这些选项添加了完整的回调：

animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: iwannascroll
}

然后我能够过滤我展开的对象并滚动到它：

            function iwannascroll(){
                var target = $(this);
                if (target.hasClass('expanded'))
                    $.scrollTo(target, 800);                
            }

显然它会仅当您使用 jQuery animate 方法进行动画时才有效。
如果有人知道更好的“通用”方法，我很想听听；）

Answer 2

同位素重新布局的回调确实触发得太早了。

我使用绑定来检测动画何时结束。

它适用于 jquery 和 css 动画引擎。

$("#isotope").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){

});

ps：当然，这必须放在常规同位素代码之后。

问候，
曼努埃尔

Answer 3

我最近尝试用animationOptions/complete-function 来实现你的想法，但没有让它正常工作。就在那时我想出了这个，通过直接将这些 jquery 命令附加到同位素调用来完成动画。

首先加载布局/砌体显示的同位素：

container.isotope({
    itemSelector: '.selector',
    masonry: {
        columnWidth: smallWidth,
    }
}); 

..然后在第二次调用中包括重新布局/调整大小单击功能：

$('.selector').click(function(){
var $this = $(this),
    tileStyle = $this.hasClass('large') ? { width: smallWidth } : { width: largeWidth };
$this.toggleClass('large');     
$this.find('.selector').stop().animate( tileStyle );   

    // Here we search for the enlarged isotope-selector and apply the scroll
    // function to it...the item position is available to jquery at this point.
$container.isotope( 'reLayout' ).find($this).each(function() {
    var target = $(this);
    if (target.hasClass('large'))
                $.scrollTo(target, 800,{offset:-50});
    });
});

...我知道代码并不完美，自动滚动仅适用于第一个单击的项目，但当已经有一个或多个放大的项目时，则不再适用。也许有人知道如何扩展它。

Answer 4

我使用这个 hack 进行回调。也许这对你有用。

setTimeout(function(){
        $container.isotope('reLayout');
    }, 1000);

Answer 5

我能够将容器的 webkitTransitionEnd 和transitionend 事件与animationOptions.complete 回调结合起来，以在浏览器中获得所需的结果。您可以使用由这 3 个函数执行的通用函数，并将任何需要的逻辑放入其中。