jQuery 中多个元素的平滑链接动画答案

【问题标题】：Chaining animations smoothly for several elements in jQueryjQuery 中多个元素的平滑链接动画
【发布时间】：2013-07-09 10:27:10
【问题描述】：

我正在尝试通过使用 jQuery 为几个堆叠的图像按顺序制作动画来重新创建地图的放大效果，以实现跨域目的。

到目前为止，我通过使用延迟和两个单个动画（A 和 B 日志）对每个图像的动画进行排队，以便通过缩放在图像之间生成平滑过渡，并在下一个图像上淡入淡出。

$('img:not(:last-child)') /* All images but farest zoom */
.reverse() /* From last to first */
.each(function (index) {
    $(this).css( /* From half size… */ {
        'width': 584,
        'height': 336,
        'margin-left': -292,
        'margin-top': -168
    });
    $(this).delay(index * 300).animate( /* …to actual size */ {
        'width': 1168,
        'height': 673,
        'margin-left': -584,
        'margin-top': -336
    }, {
        duration: 300,
        easing: 'linear',
        done: function () {
            console.log('A:', index, new Date().getTime() - timestamp);
        }
    });
});
$('img:not(:first-child)') /* All images but closest zoom */
.reverse() /* From last to first */
.each(function (index) {
    $(this).animate( /* Animate to double size */ {
        'width': 2336,
        'height': 1346,
        'margin-left': -1168,
        'margin-top': -673,
        'opacity': 0
    }, {
        duration: 300,
        easing: 'linear',
        done: function () {
            console.log('B:', index, new Date().getTime() - timestamp);
            $(this).remove(); /* Remove the elment once completed */
        }
    });
});

众所周知，jQuery 缺乏对单个队列中不同 DOM 元素的队列动画的支持，这导致了这种复杂的解决方案。

请check this Fiddle。

如您所见，一旦图像完全加载并在地图中单击，动画队列就会启动。但它远非完美。 过渡完全不流畅，导致动画之间有一点停顿，从而破坏了结果。我已经尝试了好几个小时，玩超时，重新考虑算法，强制线性转换，但没有结果。

我的主要目标是实现流畅的动画，然后为整个动画重新创建类似“swing”的全局缓动效果，逐渐加速为中间图像动画。

【问题讨论】：

标签： javascript jquery css animation queue

【解决方案1】：

所以我花了最后几个小时弄清楚这里的黑客是什么，这是你应该注入的代码

jQuery.easing = {
    zoom: function( p ) {
        return (3*p + Math.pow( p, 2 ))/4;
    }
};

之后，您可以在代码中使用easing: 'zoom'。

相当荒谬的是，在 jQuery UI 中有 32 种不同的缓动但没有可缩放的东西！！！

【讨论】：