甲板透露动画

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

答案

调用默认的缓动 jQuery使用swing,这使得项目以不均匀的速度动画.对于你想要的效果,使用linear缓动,jQuery提供的另一个选项:

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

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

如果您需要更多选择,或者只是想看看它们的外观,jQueryUI提供了各种其他缓动选项.

超越......

我修改了你的代码,在一个循环中运行整个动画.不确定这是否对您有所帮助,但它更清洁,并且做起来很有趣:

以下是结果:http://jsfiddle.net/corymcd/RsgQd/5/

优点:

• 将它与我原来的答案结合起来,这样你的动画永远不会超过规定的时间.
• 无论顶部/底部如何,都会在单个位置添加和动画项目.
• 项目按照您最初添加的顺序进行动画/显示.

另外一个选项

根据对象与堆栈的相对位置调整动画的速度:

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

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

这是一个小提琴:http://jsfiddle.net/QY3zD/

您会注意到没有基于最大距离(您最初使用它的方式)的缩放,如果您在一侧有比另一侧更多的项目,特别是在顶部和底部,动画将花费更长的时间.

您可以通过500使用单个可配置变量替换来轻松调整动画的时间.完整动画将占用指定持续时间的一到两倍.

如果你想要它只需要持续时间(例如500),移除+ 1,并且最外面的元素将总是花费那么长时间到达它们的最终位置.如果执行此操作,除了乘法之外,您可能还需要包含基线,以便初始元素不会立即生成动画:((k/bottomItems) * 400)+100