我正在尝试构建一个带有显示动画的菜单,有点像卡片动画。
整个菜单项堆栈从同一位置开始,然后随着堆栈移动,各个菜单项沿途停在目的地,直到最后一项到达目的地。
我几乎让它在这里工作:http://jsfiddle.net/XVuPQ/2/
for(var j = 0; j < topItems; j++) {
$col2.append(
$('<div>')
.addClass('absColItem')
.css({
'top': $(this).position().top + 22,
'left': '-100px'
})
.animate({
'left': 0
}, 100)
.animate({
'top': ($(this).position().top + 22) - (j * (itemHeight + 10))
}, (j + 1) * 500)
.data('parent', $(this))
);
}
但项目的时间安排与我希望的方式不一致。
有没有人对我如何实现这种效果有任何想法?
编辑 - 到目前为止的答案很有帮助,但这是我想要实现的目标的粗略动画。
最佳答案
答案
默认easing jQuery 使用称为 swing
,它使项目以不均匀的速度动画。对于你想要的效果,使用 linear
缓动,jQuery 提供的另一个选项:
.animate({ /* animation parameters */ },(j + 1) * 500, 'linear')
.animate({ /* animation parameters */ },(k + 1) * 500, 'linear')
jQueryUI 提供了多种other easing options如果您需要更多选择或只是想看看它们的外观。
超越...
我修改了您的代码以在单个循环中运行整个动画。不确定这是否对您有帮助,但它更干净,而且这样做很有趣:
结果如下:http://jsfiddle.net/corymcd/RsgQd/5/
好处:
- 将其与我在下面的原始答案结合起来,这样您的动画就不会超过指定的时间。
- 项目被添加和动画in a single location无论顶部/底部。
- 项目按照您最初添加它们的顺序动画/显示。
另一种选择
根据对象相对于堆栈的位置调整动画的速度:
.animate({ /* animation parameters */ },(j/topItems + 1) * 500)
.animate({ /* animation parameters */ },(k/bottomItems + 1) * 500)
这是一个 fiddle :http://jsfiddle.net/QY3zD/
如果没有基于最大距离的缩放(您最初的方式),您会注意到如果一侧的项目多于另一侧 - 尤其是顶部和底部,动画将花费更长的时间。
您可以通过将 500
替换为单个可配置变量来轻松调整动画的时间。完整的动画将花费您指定持续时间的一到两倍。
如果您希望它花费的时间正好与持续时间一样长(例如 500
),请删除 + 1
,最外层的元素将始终花费那么长的时间来达到它们的目的最终职位。如果这样做,除了乘法之外,您可能还想包括一个基线,这样初始元素就不会立即设置动画:((k/bottomItems) * 400)+100
关于javascript - 甲板揭示动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17453562/