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….

16 Comments

    • 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.

      • 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..

  • 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.

    • Hi Néstor

      This should be no problem.

      The functions in the example are called as so:

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

      and

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

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

      Example:

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

      //perform ajax call here the animation is finished

      });

      and

      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.

    • 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.