Javascript 更改jQuery队列中动画的松弛函数

我有一个动画链接到滚动位置。无论用户何时向上或向下滚动，都会触发该位置的动画，以在视图窗口中移动元素。如果用户滚动得更远，这些动画需要排队，以便元素沿路径平滑移动

var target = getAnimation();
var props = {
    left: [target.x, target.easing],
    top: target.y
};

$("#ball").animate(props, 400, "easeInOutQuad");

问题是，当多个动画排队时，球会以不好的方式减速和加速。我想做的是这样的：

var target = getAnimation();
var props = {
    left: [target.x, target.easing],
    top: target.y
};

var ball = $("#ball"), queue = ball.queue();

if(ball.queue().length) {
    for(var i = 1, len = queue.length; i < len; i++) {
        //modify all the other queued animations to use linear easing
    }
    ball.animate(props, 400, "easeOutQuad");
}
else {
    ball.animate(props, 400, "easeInQuad");
}

var target=getAnimation（）；
变量props={
左：[target.x，target.x]，
顶部：target.y
};
var ball=$（“#ball”），queue=ball.queue（）；
if（ball.queue（）.length）{
对于（变量i=1，len=queue.length；i

从一个Easein函数开始，在中间使用线性，在最后的EASEOUT，得到一个更平滑的动画。我是否可以访问和修改队列中的动画

编辑：

这里有一把小提琴来展示我想要实现的目标：

---

在小提琴中，我使用线性缓和，但我真的希望总体效果更像easeInOutQuad。然而，因为我允许排队，我不能只应用放松功能而不破坏整个效果（将线性更改为easeInOutQuad并快速单击队列几次以查看）。因此，我需要像上面这样的东西来创建easeInOutQuad的总体印象。

我尝试过，您可以通过创建新（重新排序）队列来完成

下载源
示例：设置队列数组以删除队列

并将开始事件替换为我的，它已工作

但队列中的函数存储在函数数组中。您需要知道要更改的动画原始队列的顺序：（或者您可以创建新的优化队列）

$( "#start" ).click(function() {
  $( "div" )
    .show( "slow" )
    .animate({ left: "+=50" }, 5000 )
    .animate({ top: "+=50" }, 5000 )
    .queue(function() {
      $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: '-=50' }, 1500 )
    .queue(function() {
      $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();


    // get current queue
    var currQueue = $( "div" ).queue( "fx");

    // create new queue and change order or add/remove animations
    var newQueue = [];
      newQueue.push(currQueue[1]);
      newQueue.push(currQueue[3]); // changed
      newQueue.push(currQueue[2]); // changed
      newQueue.push(currQueue[5]);

    // set new queue to element
    $("div").queue("fx", newQueue);

    console.log($("div").queue("fx"));
}); 

更多信息请访问

.queue（[queueName]，newQueue）
描述：操作要执行的函数队列，每个匹配元素一次

重要的是第二个参数newQueue

我希望它能有所帮助 ，

$（选择器）

返回对动画队列的引用，即。可以使用标准数组方法修改此引用。另请参阅

利用

摘要

splice（）方法通过以下方式更改数组的内容 删除现有图元和/或添加新图元

语法

数组.拼接（开始，删除计数[，项1[，项2[，…]）） 参数

开始

开始更改数组的索引。如果大于 数组的长度，实际起始索引将设置为长度 如果为负数，则将从结尾开始多个元素

deleteCount

一个整数，指示要删除的旧数组元素数 移除。如果deleteCount为0，则不移除任何元素。在这种情况下， 应至少指定一个新元素。如果deleteCount大于 大于从开始时开始的数组中剩余的元素数，然后 数组末尾的所有元素都将被删除

itemN

要添加到数组中的元素。如果未指定任何 元素，splice（）将仅从数组中删除元素

返回

包含已删除元素的数组。如果只包含一个元素 删除后，将返回一个元素数组。如果未删除任何元素 如果删除，则返回一个空数组

另见

---

var elem=$（“主体”）
，msg=函数（）{
返回“
”
+“队列长度：”
+$（此）.queue（“abc”）.length
};
元素队列（“abc”[
功能（下一个）{
$（this.append（msg.call（this））；
下一个（）
},
功能（下一个）{
$（this.append（msg.call（this））；
下一个（）
},
功能（下一个）{
$（this.append（msg.call（this））；
下一个（）
}
]);
elem.append（msg.call（elem））；
//做事，
//替换`abc`队列中的`function`，
//更改替换功能中的“放松”选项
元件队列（“abc”）.拼接（1，1，功能（下一个）{
$（this）.append（“
”
+“`abc`队列中索引`1`处的`function`
+“替换为新的“函数”
+msg.call（this））；
下一个（）
});
元素追加（“
”
+在“.splice（）”之后，“.concat（）”之前
+msg.call（elem））；
//做事，
//`concat`在`abc`队列上运行`
var arr=elem.queue（“abc”）.concat(
功能（下一个）{
$（this.append（msg.call（this））；
下一个（）
}，函数（下一个）{
$（this.append（msg.call（this））；
下一个（）
}，函数（）{
$（this.append（msg.call）（this）
+“
”
+“完成”）；
}
);
要素队列（“abc”，arr）；
元素追加（“
”
+“在“.concat（）之后”
+msg.call（elem））；
要素出列（“abc”）；

你有没有办法重新创建问题？为什么不直接停止（）？停止更改飞行轨迹。在我的实际应用程序中，这是不可接受的。我认为你可以使用animate（）向队列添加新动画，并用队列（）返回的数组中的最后一个元素替换所需的元素，然后删除最后一个元素，类似于：

box.animate（newArgs）；var queue=box.queue（）；queue[2]=queue.pop（）

你是对的，这样操作队列可以得到我想要的，但是它增加了一个巨大的复杂性，需要找出队列中的内容并从头开始重新构建。我更喜欢修改数据，而不仅仅是丢弃数据。如果要沿路径移动对象，更改队列顺序并没有多大用处。我需要更改currQueue[3]、currQueue[2]等的缓解功能@Will Reese