使用jQuery平滑地将多个元素动画链接起来

Question

我正在尝试使用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元素的动画排队到单个队列中的功能，这导致了这种复杂的解决方案。

请查看此Fiddle。

如您所见，一旦图像完全加载并且您在地图上单击，动画队列就会开始。但是它还远非完美。过渡根本不流畅，导致动画之间出现小暂停，破坏了结果。我尝试了数小时的所有方法，使用超时，重新思考算法，强制线性转换，但没有任何结果。

我的主要目标是实现流畅的动画，然后为整个动画创建一个全局缓和效果，例如'swing'，随着中间图像的动画逐渐加速。

- Meri Gaig

Answer 1

所以我花了最后几个小时来弄清楚这里的问题，这是你应该注入的代码

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

接下来，您可以在代码中使用easing: 'zoom'。

非常荒谬的是，在jQuery UI中有32种不同的缓动效果，但没有缩放效果！

- user2509223