為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元素的動畫排入隊列，這導致了這種復雜的解決方案。

請檢查此小提琴 。

如您所見，一旦圖像完全加載並單擊地圖，動畫隊列就會開始。 但這遠非完美。 過渡一點都不流暢，在動畫之間造成一點停頓，破壞了結果。 我已經嘗試了好幾個小時，嘗試超時，重新思考算法，強制進行線性轉換，但是都沒有結果。

我的主要目標是實現流暢的動畫 ，然后為整個動畫重新創建全局緩動效果，例如“搖擺”，並隨着中間圖像的動畫化而逐漸加快速度。

Answer 1

因此，我花了最后幾個小時來弄清楚這里的漏洞，這是您應該注入的代碼

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

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

荒謬的是，在jQuery UI中有32種不同的緩動，但是沒有什么可縮放的！！！