javascript - How to reset the margin of an image for animation using jquery easing? -

i'm trying animate image using jquery easing (see http://gsgd.co.uk/sandbox/jquery/easing/ ) allow image fly right left on click on link ('rates' in case) on navbar. problem is, i'm not able reset left margin of image, if ckick more once, image shifts every time click on rates. tried initalleftmargin = initalleftmargin + 285; in order reset margin. but, no luck. suggestion appreciated.

js

   $("#section-rates-go").click(function gorightease(){                    var initalleftmargin = $( ".innerliner" ).css('margin-left').replace("px", "")*1;        var newleftmargin = (initalleftmargin - 285); // 2 border        $( ".innerliner" ).animate({ marginleft: newleftmargin }, 4000, 'easeoutbounce');                       }) 

css

 .animation-mycontainer{        box-sizing: border-box;       white-space: nowrap;       overflow-x: hidden;       width: 280px;      }   .animation-box{        box-sizing: border-box;       display:inline-block;        width: 278px;       height: 148px;       vertical-align:top;        background-color:white;   } 

html navbar marhup:

<ol class="nav navbar-nav navbar-right text-right">         <li>                 <a href="#section-home">         <span>home</span></a></li>         <li>                 <a href="#section-services">         <span >services</span></a></li>         <li>                 <a href="#section-rates-go" class="section-rates-go">         <span>rates</span></a></li> <ol> 

animation markup:

              </span>               <span class="animation-box">                <img src="./content/img/car-big1.jpg" width="270"/>               </span>             </div>          </div> 

try getting initial left margin outside of click funtion because everytime click there new initial left margin :

var initialleftmargin = // margin   $("#section-rates-go").click(function gorightease(){     //...handle animation here });