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

しかし、それは一度しか機能しません（当たり前）。それにもかかわらず、 - を -= に変更しても機能しません。したがって、実際の質問は次のとおりです。CSS3でjQueryが行う相対的な処理を行う方法は?

ありがとう！

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 に答える