我正在创建某种幻灯片,设置如下:
<div class="slideshow">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
</div>
为了实现这一点,我使用jQuery animate函数将(绝对定位的)幻灯片向左或向右移动。这是通过使用相对(-=,+=)属性来完成的,比如:
$('.slide').animate({ left: '+=300' }, 500);
但在平板电脑或手机等设备上,这似乎变得非常缓慢。因此,我想使用CSS3对此进行一些性能优化。但是如何做到这一点?
我试过类似的东西:
$('.slide').css({
'transition' : 'all 1.0s ease-in-out',
'transform' : 'translateX(-'300px)'
});
但这只起作用一次(duh)。然而,将-更改为-也不起作用。所以实际的问题是,如何做jQuery在CSS3中所做的相关工作?
谢谢!
您可以使用.animate()
的步骤属性
只是步骤的一个快速使用示例:
$(element).animate({opacity:1},{
duration: 500,
step:function(now, fn){
fn.start = 0;
fn.end = 300;
$(element).css({'left':now});
}
});
fn.start
-是起点,fn.end
是终点,例如,您希望将0增加到300px。
关于这个代码:transition:all 500ms ease-out 0s;
,你可以把它留在CSS文件中。我希望我已经给出了一些想法。感谢
编辑:应用translateX
step:function(now, fn){
fn.start = 0;
fn.end = 300;
$(element).css({
'-webkit-transform':'translateX('+now+'%)'
,'-moz-transform':'translateX('+now+'%)'
,'transform':'translateX('+now+'%)'
});
}