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属性来做到这一点。