jQuery – Fly to basket (and fly from basket)

The example below is a fully working Fly to Basket implementation.

The image will fly to the center of the basket or fly from the basket back to where it came from.

fly to basket and fly from basket

works on all browsers.

Note that both functions have optional callback’s.

Comments always welcome….

  • Joseph

    Love the simple script… would be nice if it supported input button and not linited to the href link

    • NameNotTaken

      Hi Joseph

      Thanks for the interest. In fact, it’s not limited to any element type at all.

      In the $(document).ready( function(){

      you’ll see that the script is applied to the element with css class .addProduct (and .removeProduct). Therefore anything with those classes will work.

      But, that’s just part of the setup for the example and is completely independent of the flyToElement() and flyFromElement() functions.

      You can pass any two elements as parameters into these functions (along with an optional callback function). The first parameter is the element which is to fly and the second parameter is the element it should fly to (or from). Call those functions from anywhere in whatever way you like.

      Hope that clarifies.

      • Joseph

        I figured it out .. it was my mistake … Thanks for a GREAT script, looking forward to it be updated and extended soon..
        It was easier to implement than others..

  • Prince SK


    Add to Basket

    worked for button also..

  • See it in action in my plugin …

    Here also Thanks so much for this ..:)

  • Eric

    Thanks you very much for your code !

  • Jeremy

    Thank you for sharing your code. I have a question, I’m having a problem with this working when using the basket (always at the bottom of the viewable area) as a position:fixed div in both IE and Chrome. It works in Firefox if I change position:fixed in the jquery code as well. Hope you can help with this.

    In both IE and Chrome it moves the image but without making it smaller and moving to either in the div but over everything(Chrome) or right above the fixed div (IE). So the images always stay in view.

    • NameNotTaken

      Hi Jeremy.
      Apologies for the delay. I’m unable to reproduce the problem. Can you post some code which demonstrates the problem. I’ll have a go at solving it. Thanks. Please use a html encoder such as this http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/encode.aspx to encode any code you post here. Discus tends to mess up raw html code.

  • Néstor

    Thank you,you can put an example of when entering the basket image showing the amount added with ajax? complete the script

    • NameNotTaken

      Hi Néstor

      This should be no problem.

      The functions in the example are called as so:

      flyToElement($(img), $(‘#basket’));


      flyFromElement($(img), $(‘#basket’));

      Both functions also allow for a third parameter which is a callback function.


      flyToElement($(img), $(‘#basket’), function(){

      //perform ajax call here the animation is finished



      flyFromElement($(img), $(‘#basket’), function(){

      //perform ajax call here the animation is finished


      This will allow you to what you need but, of course you don’t need to use the callback functions at all, you can make the ajax call when the user clicks the ‘add’ or ‘remove’ elements. This will have the ajax call happening during the animation.

      jQuery makes AJAX quite effortless. There are plenty examples out there.

      Let me know if you need more information, i can point you in the right direction.

  • Néstor

    que sume automaticamente al entrar al basket el producto,lo muestre con asincrono ajax?

  • Néstor

    that adds automatically to the basket enter the product, show it with asynchronous ajax? I need

  • BeginnerToJQuery

    Can you tell me if this works fine with the latest ipad’s?

    • NameNotTaken

      It does indeed.

  • claire

    why i use ng-repeat the first item has the right behavior ,but other do not.

    • NameNotTaken

      Hmm, best guess is that it has to do with duplicate DOM ID’s. Does each item in the ng-repeat have the same DOM id?
      Replace the id=”addToBasket” with class=”addToBasket” and use $(‘.addToBasket’).click(….) instead of $(‘#addToBasket’).click(…).

      Alternatively or additionally, it could be to do with the need to use jQuery .live() or .on() as it now is as opposed to a conventional query. The reason being is that, AngularJS will render the items in the ng-repeat but the jQuery event handler is added before that so they never get the handler.

      Perhaps, just try adding the event handler to the links or buttons after angular has completed rendering items in the ng-repeat.

      Post a jsfiddle or equivalent demonstrating the problem if needs be, I can take a look then.