Javascript 甲板展示动画

我试图建立一个菜单，显示动画有点像卡片动画

整个菜单项堆栈从同一位置开始，然后随着堆栈的移动，各个菜单项在其目的地停止，直到最后一项到达其目的地

我几乎让它在这里工作：

for（var j=0；j

但这些项目的时间安排与我所希望的不一致

有没有人对我如何达到这个效果有什么想法

编辑- 到目前为止，答案是有帮助的，但这里有一个我试图实现的粗略动画

在

中。动画（{…}）

有一个值

500

这决定了动画的速度。根据需要更改值

更新

在您的示例中，有3种效果

$(this).animate({
    'opacity': 0,
    'top': $(this).data('parent').position().top + 22
}, 200, function(){
    $(this).remove();
});

设置移除/更改“卡”的速度

把速度调快

.animate({
    'top': ($(this).position().top + 22 + itemHeight + 10) + (k * (itemHeight + 10))
}, (k + 1) * 500)
    .data('parent', $(this))

在

中将速度设置为down
。动画（{…}）

有一个值

500

，这将确定动画的速度。根据需要更改值

更新

在您的示例中，有3种效果

$(this).animate({
    'opacity': 0,
    'top': $(this).data('parent').position().top + 22
}, 200, function(){
    $(this).remove();
});

设置移除/更改“卡”的速度

把速度调快

.animate({
    'top': ($(this).position().top + 22 + itemHeight + 10) + (k * (itemHeight + 10))
}, (k + 1) * 500)
    .data('parent', $(this))

将速度设置为下降

回答 jQuery默认使用的是

swing

，它使项目以不均匀的速度进行动画。要获得想要的效果，请使用jQuery提供的另一个选项

linear

easing：

.animate({ /* animation parameters */ },(j + 1) * 500, 'linear')

.animate({ /* animation parameters */ },(k + 1) * 500, 'linear')

如果您需要更多选择，或者只是想看看它们的样子，jQueryUI提供了各种各样的功能

超越。。。 我修改了你的代码，在一个循环中运行整个动画。不确定这是否对你有帮助，但它更干净，而且很有趣：

结果如下：

好处：

• 将其与我下面的原始答案相结合，这样您的动画将永远不会超过分配的时间
• 项目将被添加并设置动画，而不考虑顶部/底部
• 项目将按照最初添加的顺序设置动画/显示

另一种选择 根据对象相对于堆栈的相对位置调整动画的速度：

.animate({ /* animation parameters */ },(j/topItems + 1) * 500)

.animate({ /* animation parameters */ },(k/bottomItems + 1) * 500)

这是一把小提琴：

您会注意到，如果不使用基于“最大距离”（max distance）的缩放（您最初使用的方式），则如果一侧的项目多于另一侧，则动画将花费更长的时间，尤其是在顶部和底部

通过使用单个可配置变量替换

500

，可以轻松调整动画的时间。完整动画将占用指定持续时间的一到两倍

如果您希望它与持续时间一样长（例如，

500

），请移除

+1

，最外层的元素将始终需要如此长的时间才能到达其最终位置。如果执行此操作，您可能希望在乘法之外包含基线，以便初始元素不会立即动画：

（（k/bottomItems）*400）+100

答案 jQuery默认使用的是

swing

，它使项目以不均匀的速度进行动画。要获得想要的效果，请使用jQuery提供的另一个选项

linear

easing：

.animate({ /* animation parameters */ },(j + 1) * 500, 'linear')

.animate({ /* animation parameters */ },(k + 1) * 500, 'linear')

如果您需要更多选择，或者只是想看看它们的样子，jQueryUI提供了各种各样的功能

超越。。。 我修改了你的代码，在一个循环中运行整个动画。不确定这是否对你有帮助，但它更干净，而且很有趣：

结果如下：

好处：

• 将其与我下面的原始答案相结合，这样您的动画将永远不会超过分配的时间
• 项目将被添加并设置动画，而不考虑顶部/底部
• 项目将按照最初添加的顺序设置动画/显示

另一种选择 根据对象相对于堆栈的相对位置调整动画的速度：

.animate({ /* animation parameters */ },(j/topItems + 1) * 500)

.animate({ /* animation parameters */ },(k/bottomItems + 1) * 500)

这是一把小提琴：

您会注意到，如果不使用基于“最大距离”（max distance）的缩放（您最初使用的方式），则如果一侧的项目多于另一侧，则动画将花费更长的时间，尤其是在顶部和底部

通过使用单个可配置变量替换

500

，可以轻松调整动画的时间。完整动画将占用指定持续时间的一到两倍

---

如果您希望它与持续时间一样长（例如，

500

），请移除

+1

，最外层的元素将始终需要如此长的时间才能到达其最终位置。如果这样做，您可能希望在乘法之外包含一个基线，以便初始元素不会立即动画：

（（k/bottomItems）*400）+100

我更新了我的答案。过来看！这正是你想要的。我更新了我的答案。过来看！它正是你想要的。哇，简直哇。太棒了，非常感谢你。这是一个更清洁，将更容易维护。我很高兴你也玩得很开心：）。再次感谢您，这真的帮了我的忙。@HJ05祝您愉快。如果解决了您的问题，请接受此答案。：）哎呀，我很兴奋能实现我忘记接受的解决方案：）@HJ05原来的小提琴中有一个小错误-在计算

numMaxMoved

时，你需要从

numMaxMoved

中减去1，因为顶部的最低项实际上在中间：