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();
    });
});