jQuery中的幾個元素順利地鏈接動畫

我試圖重新創建一個地圖的放大效果，通過使用jQuery按順序動態生成幾個堆疊的圖像，用於跨域目的。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。

如您所見，一旦圖像完全加載並且您在地圖上單擊，動畫隊列就會啓動。但這並不完美。 轉換完全不是流體，在動畫之間造成了一點暫停，導致結果破壞。我已經嘗試了幾個小時，玩超時，重新思考算法，強制線性轉換，但沒有結果。

我的主要目標是實現流體動畫，然後重新一個全球性的寬鬆效果像整個動畫「搖擺」，逐步加快的中間圖像動畫。

來源

2013-07-11 Meri Gaig

因此，一個花了我的最後幾小時搞清楚什麼是黑客在這裏，這裏是你的代碼應該注入

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

之後，你可以在你的代碼中使用easing: 'zoom'。

很可笑的順便說一句，在jQuery用戶界面有32個不同的緩解，但沒有任何放大！

來源

2013-08-30 10:57:04

jQuery中的幾個元素順利地鏈接動畫

回答

相關問題