jQuery Fly to cart effect.

Jquery
        var cart = $("#kartCount");
        var imgtodrag = $("#main_image").find("img").eq(0);

        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                "opacity": "0.5" ,
                 "position": "absolute",
                    "height": "150px",
                    "width": "150px" ,
                    "z-index": "100"
            })
                .appendTo($("body" ))
                .animate({
                "top": cart.offset().top + 10,
                    "left": cart.offset().left + 10,
                    "width": 75,
                    "height": 75
            }, 1000, "easeInOutExpo");
            

            imgclone.animate({
                "width": 0,
                    "height": 0
            }, function () {
                $(this).detach()
            });

        }

Please include the line mentioned below in the section. Else you may encounter some jquery error

<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'>

Working :

This code can be included in add to cart of product to animate the image of the product to float into the cart basket.

Here variable imgtodrag will be the image that will float to kartCount (which will be the id of object where the animation will float to and stop).