更改jQuery队列中动画的缓动功能

Question

我有一个动画链接到滚动位置。 每当用户上下滚动时，都会触发该位置的动画，以在视图窗口内移动元素。 如果用户进一步滚动，则这些动画需要排队，以便元素沿路径平滑移动。

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");
}

通过从easyIn函数开始，在中间使用线性，并在最后使用easyOut，我获得了更加流畅的动画。 无论如何，我可以访问和修改队列中的动画吗？

编辑：

这是一个小提琴，用来演示我要实现的目标： https : //jsfiddle.net/reesewill/mtepvguw/

摆弄，我正在使用线性缓动，但我真的希望总体效果更像是easyInOutQuad。 但是，因为允许排队，所以我不能只应用缓动函数而不会弄乱整个效果（将线性更改为easeInOutQuad，然后快速单击几次以查看队列）。 因此，我需要类似上面的内容来创建easyInOutQuad的总体印象。

Answer 1

我试过了，您可以通过创建新的（重新排序）队列来做到这一点

下载源http://api.jquery.com/queue/
示例：设置队列数组以删除队列。

并用我的开始事件代替了它的工作。

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

$( "#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"));
}); 

在jQuery文档中找到更多信息

.queue（[queueName]，newQueue）
说明：对每个匹配的元素操纵一次要执行的功能队列。

重要的是第二个参数newQueue

我希望它会有所帮助

Answer 2

注意， $(selector) .queue（）返回对动画队列的引用Array 。 可以使用标准数组方法修改此引用。 另请参见.dequeue（） 。

尝试利用

Array.prototype.splice（）

摘要

splice（）方法通过删除现有元素和/或添加新元素来更改数组的内容。

句法

array.splice（start，deleteCount [，item1 [，item2 [，...]]]）参数

开始

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

deleteCount

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

itemN

要添加到数组中的元素。 如果不指定任何元素，则splice（）只会从数组中删除元素。

返回

包含已删除元素的数组。 如果仅删除一个元素，则返回一个元素的数组。 如果没有删除任何元素，则返回一个空数组。

另请参见Array.prototype.concat（）

---

 var elem = $("body") , msg = function() { return "<br />" + "queue length:" + $(this).queue("abc").length }; elem.queue("abc", [ function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() } ]); elem.append(msg.call(elem)); // do stuff, // replace `function` within `abc` queue, // change `easing` options within replacement function elem.queue("abc").splice(1, 1, function(next) { $(this).append("<br />" + "`function` at index `1` within `abc` queue " + "replaced with new `function`" + msg.call(this)); next() }); elem.append("<br />" + "after `.splice()` , before `.concat()`" + msg.call(elem)); // do stuff, // `concat` functions onto `abc` queue` var arr = elem.queue("abc").concat( function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() }, function() { $(this).append(msg.call(this) + "<br />" + "done"); } ); elem.queue("abc", arr); elem.append("<br />" + "after `.concat()`" + msg.call(elem)); elem.dequeue("abc"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>