どのように私はIPAD

Question

$('#scrollbar1').css('width','1000px'); 
      $('#scrollbar1 img').css('width','980px'); 
      setInterval(function(){ 
       var ff = $('#scrollbar1 img:first'); 
       var ll = $('#scrollbar1 img:last'); 
       var nn = ll.prev(); 
       nn.show(); 
       ll.fadeOut(1000,function(){ 
        ff.before(ll); 
       }); 
      },2000); 

の上にjqueryのフェードアウトアニメーションを最適化しないことは、単純なjQueryのスライドショー

のための私のjqueryのコードで、関連するHTMLのようなものです：

<div id="scrollbar1"> 
         <img src="images/intro/intro3_1.jpg"> 
         <img src="images/intro/intro3_2.jpg"> 
         <img src="images/intro/intro3_3.jpg"> 
         <img src="images/intro/intro3_4.jpg"> 
         <img src="images/intro/intro3_5.jpg"> 
         <img src="images/intro/intro3_6.jpg"> 
         <img src="images/intro/intro3_7.jpg"> 
        </div> 

これは、デスクトップブラウザで完璧に動作しますしかし、IPADでは、その効果は本当に不安定です。デスクトップバージョンのようにアニメーションをどのように滑らかにすることができますか？

Answer 1

私はCSS遷移とfadeOutではなくaddClass()を使用します。 IEでは、まっすぐなhide/showエフェクトが得られますが、他の現代的なブラウザでは、CSSの不透明度フェードはより滑らかで速くなります。

アクションで私のアプローチを表示するには、このJSfiddleをチェックアウト：http://jsfiddle.net/GFmM8/47/

#scrollbar1 img { 
    position: absolute; 
    opacity: 0; 
    -moz-opacity: 0; 
    -webkit-opacity: 0; 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
} 

#scrollbar1 img.current { 
    opacity: 1; 
    -moz-opacity: 1; 
    -webkit-opacity: 1; 
} 

$(document).ready(function(){ 
    var interval = setInterval(fader, 1000); 
    function fader() { 
     var $img = $('img'), 
      imglength = $img.size(), 
      $imgcur = $('img.current'), 
      imgindex = $imgcur.index() + 1, 
      $imgnext = $imgcur.next('img'); 
     $imgcur.removeClass('current'); 
     if(imglength - imgindex == 0) { 
      $('img:first').addClass('current'); 
     } else { 
      $imgnext.addClass('current'); 
     } 
    } 
});