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

Question

I'm trying to animate an image using jquery easing (See http://gsgd.co.uk/sandbox/jquery/easing/ ) which will allow the image to fly from right to left on click on a link ('rates' in case) on navbar. The problem is, I'm not able to reset the left margin of the image, so if I ckick more than once, the image shifts every time I click on rates. I tried like initalLeftMargin = initalLeftMargin + 285; in order to reset the margin. But, no luck. Any suggestion is much appreciated.

JS

   $("#section-rates-go").click(function goRightEase(){            
       var initalLeftMargin = $( ".innerLiner" ).css('margin-left').replace("px", "")*1;
       var newLeftMargin = (initalLeftMargin - 285); // extra 2 for 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>

score 0 · Answer 1 · answered Nov 17 '16 at 20:24

Try getting your initial left margin outside of your click funtion because everytime you click there is a new initial left margin :

var initialLeftMargin = // get the margin 

$("#section-rates-go").click(function goRightEase(){
    //...handle your animation here
});

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

1 Answers1