Question

我正在创建某种幻灯片，其设置如下：

<div class="slideshow">
    <div class="slide">slide1</div>
    <div class="slide">slide2</div>
    <div class="slide">slide3</div>
</div>

为了实现这个目的，我使用jQuery动画功能将（绝对定位的）幻灯片向左或向右移动。这是通过使用相对（ - =，+ =）属性完成的，如下所示：

$('.slide').animate({ left: '+=300' }, 500);

但是平板电脑或手机等设备似乎变得非常慢。所以，我想用CSS3做一些性能优化。但是......如何做到这一点？

我尝试过类似的事情：

$('.slide').css({
    'transition' : 'all 1.0s ease-in-out',
    'transform' : 'translateX(-'300px)'
});

但这只能工作一次（呃）。然而，改变 - 到 - =也不起作用。所以实际问题是。如何处理jQuery在CSS3中的相关内容？

谢谢！

Answer 1

您可以使用.animate()

的step属性

只是步骤的快速使用示例：

$(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+'%)'
            });
          }

CSS3 TranslateX相对于jQuery animate等当前位置

1 个答案: