javascript - 甲板揭示动画

Question

我正在尝试构建一个带有显示动画的菜单，有点像卡片动画。

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

我几乎让它在这里工作: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))

    );
}

但项目的时间安排与我希望的方式不一致。

有没有人对我如何实现这种效果有任何想法？

编辑 -到目前为止的答案很有帮助，但这是我想要实现的目标的粗略动画。

Answer 1

答案

默认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