jQuery商品快速飞入购物车

本文分享一款加入购物车效果

分类：其它特效 > 动画效果难易：中级

查看演示下载资源下载积分： 20 积分

HTML

<div class="thingsBox">
    <img src="images/14.jpg" onClick="MoveBox(this)" />
</div>
<div class="thingsBox">
    <img src="images/15.jpg" onClick="MoveBox(this)" />
</div>
<div class="thingsBox">
    <img src="images/16.jpg" onClick="MoveBox(this)" />
</div>
<div class="thingsBox">
    <img src="images/17.jpg" onClick="MoveBox(this)" />
</div>
<div class="thingsBox">
    <img src="images/1.jpg" onClick="MoveBox(this)" />
</div>

jQuery加入购物车动画

function MoveBox(obj) {
    var divTop = $(obj).offset().top;
    var divLeft = $(obj).offset().left;
    $(obj).css({
        "position": "absolute",
        "z-index": "500",
        "left": divLeft + "px",
        "top": divTop + "px"
    });
    $(obj).animate({
        "left": ($("#collectBox").offset().left - $("#collectBox").width()) + "px",
        "top": ($(document).scrollTop() + 30) + "px",
        "width": "80px",
        "height": "30px"
    },
    500,
    function() {
        $(obj).animate({
            "left": $("#collectBox").offset().left + "px",
            "top": $("#collectBox").offset().top + "px",
            "width": "50px",
            "height": "25px"
        },
        500).fadeTo(0, 0.1).hide(0);
    });
}