Animate from one element to another (jQuery plugin)
Image via Wikipedia
Have you even tried clicking an “Add to cart”-button and not understood what happened? I have. An although I understand the idea of adding a product to the cart, and then letting the user continue browsing from where he is, I still get stumped when “nothing happens” when I click the button. So what to do?
Simple: Add a animation from the add button to the cart. That way you communicate what just happened. “The product moved in there, and by clicking the cart you’ll find it again. Now continue buying stuff!”.
Somebody must have done this before, so I started looking for a jQuery plugin to do this (jQuery was already on the page, so why not?). I found add2cart – A plugin that looks good, but that misses a few features I wanted:
- The animation duration is set in seconds, meaning products further down the page will move faster than those further up. I wanted constant speed.
- It didn’t allow me to customize the look of the animated element.
- The code rely on concatenating strings of CSS and generally could use lots of improvement.
So I did what anyone would do: rewrote the code from scratch, and posted it on GitHub.
Get the code: Animate From To 1.0
It’s my first jQuery plugin ever, and my first public GitHub project, so let me know if I’ve done something wrong. Is this something that could be useful in one of your projects?
Niklas ( 6 May 2011 )
Is there a demo?
Have you seen the “transfer” effect in jQuery UI? I guess id does pretty much the same.
http://jqueryui.com/demos/effect/
Azzoz Al-Hasani ( 15 May 2011 )
Good point, I’m going to do that in my current project.
Emil Stenström ( 23 May 2011 )
Hi Maria. No, I create a gray semitransparent rectangle with the same size as the target element, and animate that one to the cart. It looks like it’s the product moving, but it really isn’t. It’s an easy fix to animate the real product instead.
Mike ( 3 Jun 2011 )
I know of a extension for Magento stores that will do this using ajax. The extension is http://www.magentocommerce.com/magento-connect/j2t-design/extension/2101/j2t-ajax-cart
I plan on installing it on my magento store http://www.raptorsairsoft.com soon.
Mike ( 13 Jun 2011 )
By the way, I’m want to learn JQuery and was looking for a tutorial. I found this one http://www.w3schools.com/jquery/default.asp, but does anybody have one they recommended.
Cody ( 8 Sep 2011 )
@Mike w3c schools does have some great tutorials on things, but not so much on jquery. You might want to take a look at jquery’s main doc: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery.