1

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

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

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

    );
}

但是这些项目的时间安排并没有按照我想要的方式排列。

有人对我如何达到效果有任何想法吗？

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

粗糙的甲板动画

4

2 回答 2

5

答案

jQuery 使用的默认缓动被称为swing，这使得项目以不均匀的速度进行动画处理。对于您想要的效果，请使用lineareasing，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

于 2013-07-03T17:29:34.717 回答
1

在.animate({...})有一个值500，这决定了动画的速度。根据您的需要更改值。

更新

在你的例子中有3个效果

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

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

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

将速度设置为向上

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

将速度设置为下降

于 2013-07-03T16:43:29.013 回答