如何使用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重置動畫圖片的邊距？

回答

相關問題