Go Daddy Domain Offer

Monday 4 July 2011

Animate from one element to another (jQuery plugin)

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:
    Stencil of a shopping cart with the head of th...
  • 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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.animate_from_to-1.0.js"></script>
<script>
    $(document).ready(function(){
        $("#button1").click(function(){
            $('#prod_123').animate_from_to('#cart');
        });
    });
</script>

<span id="cart">
    My shopping cart
</span>


<div id="prod_123" style="height: 100px; width:300px; margin-top: 100px; background: pink">
    <form onsubmit="return false;">
        <button type="submit" id="button1">Add to cart</button>
    </form>
</div>

1 comment:

  1. Hi,
    Nice and informative post. I appreciate the work done by author in this blog. Thanks for sharing this informative post.

    Website Development Melbourne

    ReplyDelete