1

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

<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)'
});

但这只能工作一次（呃）。尽管如此，将 - 更改为 -= 也不起作用。所以实际的问题是。如何做 jQuery 在 CSS3 中所做的相关工作？

谢谢！

4

1 回答 1

5

您可以使用的步骤属性.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+'%)'
            });
          }
于 2013-07-26T08:43:27.640 回答