Javascript 如何以智能的方式一个接一个地使用多个独特的动画

朋友们，我用一个简单的代码让你们更好地理解问题的重点。

我有一个红色的盒子，我想用它在“时间轴”中制作一些动画，我的意思是动画，先是一种方式，然后是另一种方式，然后是另一种方式，依此类推

有正确的方法吗？有没有一个插件可以用一个漂亮的代码一个接一个地制作动画，干净而不愚蠢，就像这样：

（函数（$）{
变量框=$（'.box'）；
$（框）。设置动画({
左:'125',，
});
$（框）。设置动画({
前100名
})
}（jQuery））
.box{
宽度：150px；
高度：150像素；
边框：1px纯红；
位置：相对位置；
}
使用时间线示例的方法是数据驱动方法

在我看来，数据驱动的方法是非常好的，它们是一种有效的软件模式。它基本上把逻辑放在数据结构中，代码处理结构

这很好，因为它允许哑代码和智能数据结构。在这种情况下，维护/调试要容易得多

阅读更多（这是一本关于unix以外的书籍）有一整章专门介绍这种方法

现在，话虽如此，你的时间线方法还是可以改进的

从对象切换到由
JSON
对象组成的数组
将当前动画索引存储在变量中
制作一个递归函数，在动画完成之前调用它自己

var timeLineAnimations=[{
元素：“某些选择器”，
动画：{
前100名
},
时间：1000
}, {
元素：“某些选择器”，
动画：{
左：“100”
},
时间：2000
}, ...];
var currentIndex=0；
函数animateTimeLine（currentIndex）{
var currentAnimation=timeLineAnimations[currentIndex]；
$（currentAnimation.element）.animate（currentAnimation.animation，currentAnimation.time，function（））{
currentIndex++；
if（currentIndex

这一改进的好处是它纯粹是数据驱动的，您不再拥有像
firstAnimation
、
secondAnimation
等命名函数

代码所做的只是机械地调用自身，而您的逻辑是数据结构的完美！这正是我要找的@ammarces！！！。。谢谢，我要买这本书。@Amandaferari，没问题。我希望你喜欢。（并非所有章节都与软件模式相关，所以只是给你一个提示）没问题，我喜欢与技术、编程等相关的一切。目前我正在阅读stoyan stefanov的javascript模式，非常好！
var timeLineAnimations = [{
    element: 'some-selector',
    animation: {
        top: '100'
    },
    time: 1000
}, {
    element: 'some-selector',
    animation: {
        left: '100'
    },
    time: 2000
}, ...];

var currentIndex = 0;

function animateTimeLine(currentIndex) {
    var currentAnimation = timeLineAnimations[currentIndex];

    $(currentAnimation.element).animate(currentAnimation.animation, currentAnimation.time, function() {
        currentIndex++;
        if (currentIndex < timeLineAnimations.length) {
            animateTimeLine(currentIndex);
        }
    });
}
animateTimeline(0);