JQueryアニメーションがWebkitで強化され、不一致

Question

次のコードは、さまざまな項目をバーにスライドさせる機能を制御します。 JavaScriptをサポートするブラウザでCSS3を使用するJQuery animate enhancedというプラグインを使用しています。

CSS3がないと、この機能は完全に機能します。しかしCSS3ではすべてのタブが選択されると、最初のタブはもはや協力しなくなります。

フィドル：http://jsfiddle.net/cqBZz/3/

コード：

$(document).ready(function() { 
    var bounceholder = 0; 
    var delayact = 0; 
    $('.bouncetabs a').click(function() { 
     $('.bouncetabs a').removeClass('active'); 
     $(this).addClass('active'); 

     if ($(this).index('.bouncetabs a') < bounceholder) { 
      var backwards = 1 
     } else { 
      var backwards = 0 
     } 

     bounceholder = $(this).index('.bouncetabs a'); 
     var bounceoffset = 0; 

     if ($('.bounceholder ul:eq(' + bounceholder + ') li').length == 6) { 
      var bounceoffset = 0; 
     } else if ($('.bounceholder ul:eq(' + bounceholder + ') li').length == 5) { 
      var bounceoffset = 72; 
     } else if ($('.bounceholder ul:eq(' + bounceholder + ') li').length == 4) { 
      var bounceoffset = 144; 
     } else if ($('.bounceholder ul:eq(' + bounceholder + ') li').length == 3) { 
      var bounceoffset = 216; 
     } else if ($('.bounceholder ul:eq(' + bounceholder + ') li').length == 2) { 
      var bounceoffset = 288; 
     } 

     $('.bounceholder ul:eq(' + bounceholder + ')').prevAll().each(function() { 
      $('li', this).each(function() { 
       $(this).delay(150).animate({ 
        left: -200, 
        top: 0, 
        leaveTransforms: true 
       }, { 
        duration: 400, 
        queue: true 
       }); 
      }); 
     }); 
     $('.bounceholder ul:eq(' + bounceholder + ')').nextAll().each(function() { 
      $('li', this).each(function() { 
       $(this).delay(150).animate({ 
        left: +1000, 
        top: 0, 
        leaveTransforms: true 
       }, 600); 
      }); 
     }); 

     if (backwards == 1) { 
      bounceoffset = 800 - bounceoffset; 
      $($('.bounceholder ul:eq(' + bounceholder + ') li').get().reverse()).each(function (i) { 
       delay = (i + 1) * 100; 
       $(this).delay(delay).animate({ 
        left: +bounceoffset, 
        top: 0, 
        opacity: 0.6, 
        leaveTransforms: true 
       }, { 
        duration: 400, 
        queue: true 
       }); 
       bounceoffset -= 160; 
      }); 
     } else { 
      $('.bounceholder ul:eq(' + bounceholder + ') li').each(function (i) { 
       delay = (i + 1) * (100 * delayact); 
       $(this).delay(delay).animate({ 
        left: +bounceoffset, 
        top: 0, 
        opacity: 0.6, 
        leaveTransforms: true 
       }, { 
        duration: 400, 
        queue: true 
       }); 
       bounceoffset += 160; 
      }); 
     } 
     delayact = 1; 

     return false 
    }); 

}); 

Answer 1

現在ハードウェアアクセラレーションに対処する最善の方法は、-moz-翻訳のためCSS3遷移の組み合わせを使用して、-webkit-翻訳され、 - webkit-translate3dおよびjQueryがアニメーション化されます。上記のツールで私の個人的な経験はかなり悪いです。私のページに複数のエラーが発生しました。あなたはtranslate3dだけサファリとクロムのために使用されるように移動したいすべての要素の

また設定translateZ（0PXは）

ここを始めるための何かがあります（ハードウェアアクセラレーションを有効にします）。ブラウザを動作させるためのチェックを追加する必要があります。

if(browser.isFF) { 
    function moveDOM(jQueryObj,x,y) { 
     jQueryObj[0].style.cssText += '-moz-transform:translate('+x+'px,'+y+'px);'; 
    } // firefox does not know translate3d 
} else if(browser.isAndroid) { 
    function moveDOM(jQueryObj,x,y) { 
     jQueryObj[0].style.cssText += '-webkit-transform:translate('+x+'px,'+y+'px);'; 
    } // most Android version currently don't know translate3d (U could add checks for the Android versions though -> caniuse.com 
} else if(browser.isSafari || browser.isChrome) { 
    function moveDOM(jQueryObj,x,y) { 
     jQueryObj[0].style.cssText += '-webkit-transform:translate3d('+x+'px,'+y+'px,0px);'; 
    }; 
} else { // ie opera, others 
    function moveDOM(jQueryObj,x,y) { 
     jQueryObj.animate({'left':x,'top':y},500); 
    }; 
} 

// example run of the function, moving the element with the id myDiv to position (50,90) 
moveDOM($("#myDiv"),50,90); 

CSSの遅延は、CSS3を使って設定することができます変換します

-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; 

PS：私は4例外に代わり3でjQueryのの.css（）functoinのデフォルトのJSを使用なぜあなたは不思議に思うかもしれません...それは単に速いです。さらに速度を上げたい場合は、+ = = =を置き換えます。これは、追加した可能性がある他のスティルを上書きします。