JavaScript動畫在iPhone上徘徊

Question

我不知道爲什麼，但我的動畫在Chrome上運行得非常好，但是落後於iPhone。我正在使用jQuery來簡化工作並具有以下功能。

function slideLeftTo(to, after) { 
    var page = $(to); 
    var current = $(".current"); 

    if (page.length < 1) return; 
    if (current.length < 1) return; 

    if (page.attr("id") == current.attr("id")) return; 

    var endX = current.width(); 

    page.css({ top: "0px", left: endX + "px", display: "block" }); 
    current.css({ top: "0px", left: "0px" }); 

    var x = endX; 
    var timer = setInterval(function() { 
     if (x < 0) { 
      x = 0; 
      clearInterval(timer); 
     } 

     page.css({ top: "0px", left: x + "px" }); 
     current.css({ top: "0px", left: (x - endX) + "px" }); 

     x -= 100; 

     if (x <= 0) { 
      after(); 
     } 
    }, 50); 
} 

function slideRightTo(to, after) { 
    var page = $(to); 
    var current = $(".current"); 

    if (page.length < 1) return; 
    if (current.length < 1) return; 

    if (page.attr("id") == current.attr("id")) return; 

    var endX = current.width(); 

    page.css({ top: "0px", left: -endX + "px", display: "block" }); 
    current.css({ top: "0px", left: "0px" }); 

    var x = 0; 
    var timer = setInterval(function() { 
     if (x > endX) { 
      x = endX; 
      clearInterval(timer); 
     } 

     page.css({ top: "0px", left: (x - endX) + "px" }); 
     current.css({ top: "0px", left: x + "px" }); 

     x += 100; 

     if (x >= endX) { 
      after(); 
     } 
    }, 50); 
} 

我可以簡單地稱這些功能工作，他們正在工作，但滯後。我打電話給他們的方式是...

slideLeftTo('#div_id', function() { 
    console.log("It was animated!"); 
}); 

我知道你可以指出我的功能有什麼問題。

Answer 1

我完全使用CSS動畫解決了問題。我用translate3D屬性來做到這一點。