7


我正在使用带有可扩展项目的同位素（http://isotope.metafizzy.co），我想使用 ScrollTo 以便我可以自动滚动到新扩展的项目..

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

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

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

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

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

任何想法 ？

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

4

5 回答 5

7

好的，

偷偷看同位素代码，发现动画选项是直接传给了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 动画方法时，它才会起作用。如果有人知道更好的“通用”方式，我很想听听它；）

于 2011-03-25T15:18:01.343 回答
5

Isotope reLayout 的回调确实触发得太快了。

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

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

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

});

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

问候，曼努埃尔

于 2013-05-21T20:41:33.950 回答
2

我最近尝试使用 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});
    });
});

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

于 2011-07-01T12:22:36.393 回答
2

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

setTimeout(function(){
        $container.isotope('reLayout');
    }, 1000);
于 2013-05-10T13:04:31.710 回答
1

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

于 2011-08-02T13:58:39.347 回答