Jquery plugin

by Web Carvers

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="one" data-previous="(10px, 20px)" data-final="(300px, 20px)" data-time="1500" data-easing="easeInOutQuart">Mayank Tripathi</div>

<div class="two" data-previous="(10px, 150px)" data-final="(150px, 150px)" data-time="1500" data-easing="easeOutBounce">Mayank Tripathi</div>

CSS

p {
    margin:0;
    padding:0;
}
.one, .two {
    display:block;
    height:20px;
    width:120px;
    background:orange;
    color:#fff;
    text-align:center;
}
.two{background:green;}
div.clear {
    clear:both;
    height:1px;
}

JavaScript

/********************************************************************************************************************/
/*                  WC_animate plug-in                                                                              */
/*                                                                                                                  */
/*  Version        : 1.0                                                                                            */
/*  Date           : 11th February, 2014                                                                            */
/*  Created by     : Mayank Tripathi                                                                                */
/*  Required Files : jQuery Easing (//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js)        */
/*                   jQuery Library (//code.jquery.com/jquery-1.10.2.min.js)                                        */
/*                                                                                                                  */
/********************************************************************************************************************/

/*********************************************************************************************************************

Q. How to use?

    Ans. One need to provide the previous position of the element and the final position of the element along with the time required to animate and easing to be used.

    data-previous = "(<previous_position_top>, <previous_position_left>)"
    data-final    = "(<final_position_top>, <final_position_left>)"
    data-time     = "1000"                                                          (the value is in milliseconds, 1s = 1000ms)
    data-easing   = "easeOutQuart"

                     Possible Values for easing are:

                        linear,             swing,          easeInQuad,     easeOutQuad,        easeInOutQuad,      easeInCubic, 
            ...