Give the impression of movement from one element to another
Switch branches/tags
Nothing to show
Pull request Compare This branch is 13 commits behind EmilStenstrom:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

====================================== Animate from to v1.0 - a jQuery plugin

This is a simple jQuery plugin with one simple purpose: to give the impression of movement from one element to another. This is useful for instance for a web shop when you want show that a product was added to the cart. The idea is based on another plugin called add2cart, but all of the code is rewritten and made more flexible.

Who should I thank for this?

You should thank me, Emil Stenström You're welcome!

Johan Brook [<](< contributed with code restructuring and a different type of plugin call.



Arguments and construction:

$(sourceElm).animate_from_to(targetElm [, options]);

Basic, bare bones example with real arguments:


It's also possible to use this construct:

$.animate_from_to(sourceElm, targetElm, [, options]);


<script src=""></script>
<script src="jquery.animate_from_to-1.0.js"></script>

<span id="cart">
    My shopping cart

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


Slow the speed of the animation:

$('#prod_123').animate_from_to('#cart', {
    pixels_per_second: 1000

Slow the speed and make the animated element blue:

$('#prod_123').animate_from_to('#cart', {
    pixels_per_second: 1000,
    initial_css: {
        'background': 'blue'

Call the function of your choice when the animation finishes:

$('#prod_123').animate_from_to('#cart', {
    callback: function(){ 
		alert('Animation done');


This is what the different arguments mean:

sourceElm (required)

Element to start the animation from. Can be either a selector or a DOM element.

targetElm (required)

Element where the animation ends

options (optional, default: {})

  • pixels_per_second (optional, default: 3000). Speed of the animation, in number of pixels per elapsed second. This makes the animation move with constant same speed no matter where on the page the element is.

  • initial_css (optional, default: ). Object literal. A way to override the default CSS of the "shadow" element that is part of the animation.

  • callback (optional, default: ). Function. A callback that will be called when the animation finishes.

A custom call would hence look like this:

$("#prod_123").animate_from_to("#cart", {
    pixels_per_second: 1000,
    initial_css: {
        "color": "red",
        "background-color": blue
    callback: function(){


Copyright (c) 2011 Emil Stenstrom

Dual licensed under the MIT and GPL licenses: