回调jquery插件Isotope

ski*_*boo 6 jquery jquery-isotope


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

我首先尝试使用reLayout方法进行回调,例如:

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

function iwannascroll(origin_with_newpos){
    $.scrollTo(origin_with_newpos, 800);                
}
Run Code Online (Sandbox Code Playgroud)

origin是一个变量,我从点击处理程序中放入"this".
不幸的是,我总是得到对象的旧位置..

实际上我不确定回调是否过早被调用,或者我是否无法理解如何存储我的jQuery对象使其更像是副本或"指针";-)

任何想法 ?

编辑:我现在确定在动画结束前调用回调,所以我的问题是:我现在怎么能完成动画?

ski*_*boo 7

行,

偷偷摸摸同位素代码,我发现动画选项直接传递给animate jquery方法,所以我添加了对这些选项的完整回调:

animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: iwannascroll
}
Run Code Online (Sandbox Code Playgroud)

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

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

很明显,只有当你使用jQuery动画方法制作动画时它才有效.如果有人知道更好的"通用"方式,我很乐意听到它;)


小智 5

Isotope reLayout的回调确实太快了.

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

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

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

});
Run Code Online (Sandbox Code Playgroud)

ps:当然,这必须放在常规同位素代码之后.

问候,曼努埃尔