jQuery.animate()實現的購物車拋物線

項目里用到了購物車添加商品時“飛入”的特效，因為已經引入了jQueryUI，所以動畫用了animate，要點就是分解x軸和y軸的運動，采用不同的easing即可。

我最后用的縱向easing是easeInBack，實際使用可以根據情況用別的曲線。

demo

為了演示各種可能，這個demo做了3個panel，里面的item都會飛向中間panel的右下角。支持responsive，panel可以橫向排列，也可以縱向排列。

代碼其實就只有兩步：1.在原位置克隆點擊圖片 2.在克隆的圖片上調用animate

PS:這種方式位置越低的圖片向上飛的高度越短，所以可能會有要求每個圖片向上飛的高度相同的需求，這種情況一般將anmiate的top參數設為定值就可以了，然后使用一些樣式將飛出框外的fxImg遮蓋掉

 

$('div.item').on('click', function(){
  var $orgImg = $('img', this);
  var $targetDiv = $('div.target');
  var $fxImg = $orgImg.clone().css({
    'position': 'absolute',
    'z-index': 10000,
    'width': $orgImg.width(),
    'height': $orgImg.height(),
    'border-radius': '50%'
  }).css($orgImg.offset()).appendTo('body');
  $fxImg              
    .animate({
        left: [$targetDiv.offset().left + $targetDiv.width() - $fxImg.width(), 'linear'],
        top: [$targetDiv.offset().top + $targetDiv.height() - $fxImg.height(), 'easeInBack']
    }, 600)
    .fadeOut(200, function () {
        $fxImg.detach();
    });
});