La animación de JavaScript se retrasa en iPhone

I don't know why but my animation which works perfectly fine on chrome but lags on iPhone. I am using jQuery to ease the work and have following functions.

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);
}

I can simply call these functions to work and they are working but are lagging. The way I call them is...

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

I know you can point out what's wrong with my functions.

preguntado el 27 de agosto de 11 a las 22:08

I normalized it more but still not perfectly fast. -

If you resolved this issue (as noted in stackoverflow.com/questions/7320977/…), then it would be useful if you could explain how you fixed it. -

1 Respuestas

I resolved the issue by using CSS animation completely. I used translate3D property to do that.

Respondido el 18 de Septiembre de 11 a las 12:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.