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对象使其更像是副本或"指针";-)
任何想法 ?
编辑:我现在确定在动画结束前调用回调,所以我的问题是:我现在怎么能完成动画?
行,
偷偷摸摸同位素代码,我发现动画选项直接传递给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:当然,这必须放在常规同位素代码之后.
问候,曼努埃尔