Wie wird der Rand eines Bildes für die Animation mit jquery easing zurückgesetzt?

Question

Ich versuche, ein Bild mit jquery Easing (siehe http://gsgd.co.uk/sandbox/jquery/easing/) zu animieren, die das Bild von rechts nach links bei Klick auf einen Link ('Preise' für den Fall) auf Navbar fliegen lassen. Das Problem ist, ich bin nicht in der Lage, den linken Rand des Bildes zurücksetzen, also wenn ich mehr als einmal kick, verschiebt sich das Bild jedes Mal, wenn ich auf Preise klicke. Ich habe versucht, initalLeftMargin = initalLeftMargin + 285;, um den Rand zurückgesetzt. Aber, kein Glück. Jeder Vorschlag wird sehr geschätzt.

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> 

Answer 1

Versuchen Sie, Ihren anfänglichen linken Rand außerhalb Ihres Klick funtion bekommen, weil jedes Mal klicken, um dort ein neuer Anfang linker Rand:

var initialLeftMargin = // get the margin 

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