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

Isotope reLayout的回调确实太快了。

我使用bind来检测动画结束的时间。

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

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

});

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

问候，曼努埃尔

Answer 3

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

布局/砌体显示的第一个加载同位素：

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

..然后在第二个调用中包括单击函数中的reLayout / resizing：

$('.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执行的公共函数，并在其中放置任何所需的逻辑。

回调jquery插件Isotope

5 个答案: