javascript - How to reset the margin of an image for animation in jquery easing plugin? -
how reset margin of image animation in jquery easing plugin? i'm trying animate image using jquery easing plugin (see http://gsgd.co.uk/sandbox/jquery/easing/) allow image fly left right on click of link of page. tried this:
js
$(".section-rates-go").click(function gorightease(){ var initalleftmargin = $( ".innerliner" ).css('margin-left').replace("px", "")*1; var newleftmargin = (initalleftmargin - 285); // 2 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 div navbar:
<div id="nav"> <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> <li class="hidden-sm hidden-xs"> </ol></div>
for image animation:
<div class="animation-mycontainer"> <div class="innerliner"> <span class="animation-box"> </span> <span class="animation-box"> <img src="./content/img/car-big1.jpg" width="270"/> </span> </div> </div>
the problem is, if click more 1 time on "rates" in navbar, image shifts each time. want rese left margin initial position on click on "rates". how can achieve that? tried assign initalleftmargin initalleftmargin = initalleftmargin + 285;
seems it's not resetting left margin of image. suggestion appreciated.
Comments
Post a Comment