JQuery 애니메이션이 웹킷을 통해 향상되고 일치하지 않음

Question

다음 코드는 막대에서 여러 항목을 슬라이딩하기위한 함수를 제어합니다. 가능한 경우 브라우저를 지원할 때 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

하드웨어 가속은 현재에 대한 CSS3 전환의 조합을 사용하고 대처하는 가장 좋은 방법 -moz을-번역, -webkit-번역 - webkit-translate3d 및 jQuery 애니메이션. 위에서 언급 한 도구를 사용한 개인적인 경험은 다소 나쁩니다. 내 페이지에 여러 개의 오류가 발생했습니다. 당신이 translate3d은 사파리와 크롬에 사용되는로 이동하려는 모든 요소에 대한

또한 설정 translateZ (0 픽셀)을

여기에서 시작하는 무언가이다 (하드웨어 가속을 할 수 있습니다). 브라우저가 제대로 작동하는지 확인해야합니다.

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 : 내가 사가지 경우에서 대신 jQuery의 .CSS 3() functoin의 기본 JS를 사용하는 이유가 궁금 할 것이다 ... 그것은 더 빠릅니다. 속도를 더 높이려면 + = = =로 바꾸십시오.하지만 추가 한 다른 stly를 덮어 씁니다.