jquery easing을 사용하여 애니메이션의 이미지 여백을 재설정하는 방법은 무엇입니까?

Question

jquery easing (http://gsgd.co.uk/sandbox/jquery/easing/ 참조)을 사용하여 이미지에 애니메이션을 적용하려고합니다.이 경우 navbar의 링크 ('요금')를 클릭하면 이미지가 오른쪽에서 왼쪽으로 날아갈 수 있습니다. 문제는, 나는 이미지의 왼쪽 여백을 재설정 할 수 없기 때문에 두 번 이상 클릭하면 이미지가 클릭 할 때마다 비율로 이동합니다. 여백을 재설정하려면 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 네비게이션 바의 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> 

Answer 1

마다 새로운 초기 왼쪽 여백이 클릭 때문에 클릭 연료 소모량의 외부에서 최초의 왼쪽 여백을 받고보십시오 :

var initialLeftMargin = // get the margin 

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

가