我正在尝试使用 jquery 缓动(请参阅 http://gsgd.co.uk/sandbox/jquery/easing/)为图像设置动画,这将允许
单击导航栏上的链接(如果是“费率”),图像将从右向左飞行。问题是,我无法
重置图像的左边距,所以如果我多次单击,每次单击时图像都会移动
费率。我试过 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 导航栏组合:
<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>
最佳答案
尝试在点击函数之外获取初始左边距,因为每次单击时都会有一个新的初始左边距:
var initialLeftMargin = // get the margin
$("#section-rates-go").click(function goRightEase(){
//...handle your animation here
});
关于javascript - 如何使用 jquery easing 重置动画图像的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40664100/