javascript - 如何使用 jquery easing 重置动画图像的边距？

Question

我正在尝试使用 jquery 缓动(请参阅 http://gsgd.co.uk/sandbox/jquery/easing/)为图像设置动画，这将允许单击导航栏上的链接(如果是“费率”)，图像将从右向左飞行。问题是，我无法重置图像的左边距，所以如果我多次单击，每次单击时图像都会移动费率。我试过 initalLeftMargin = initalLeftMargin + 285; 来重置边距。但是，没有运气。非常感谢任何建议。

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导航栏组合:

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

动画标记:

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

Answer 1

尝试在点击函数之外获取初始左边距，因为每次单击时都会有一个新的初始左边距:

var initialLeftMargin = // get the margin 

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