如何使用jquery easing重置动画图片的边距？

我试图使用jquery easing（请参阅http://gsgd.co.uk/sandbox/jquery/easing/）动画图像，这将允许图像从右到左点击链接（'费率'的情况下）在导航栏上飞行。问题是，我无法重置图像的左边距，因此如果我不止一次点击，每次点击时，图像都会移动。我尝试像initalLeftMargin = initalLeftMargin + 285;为了重置边距。但是，没有运气。任何建议，非常感谢。如何使用jquery easing重置动画图片的边距？

$("#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 导航栏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>

动画标记：

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

来源

2016-11-17 JoeZ

尝试让你的点击funtion之外您最初的左边空白处因为每次你点击有一个新的初始左边距：

var initialLeftMargin = // get the margin 

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

来源

2016-11-17 20:24:26

如何使用jquery easing重置动画图片的边距？

回答

相关问题