Question

On my page I run a show and hide effect with slide simultaneously on different divs, but the animation lags a bit. If I run the show effect after the hide is done it doesn’t lag at all, so I’m wondering if there’s any way to make this lag go away.

Code without lag:

$(currentPageID).stop().hide("slide", {"direction": "left"}, 1000, function(){
    $(pageID).show("slide", {"direction": "right"}, 1000);
});

Code with lag:

$(currentPageID).hide("slide", {"direction": "left"}, 1000);
$(pageID).show("slide", {"direction": "right"}, 1000);

Answer 1

This may not be lag so much as it is just an optical illusion based on your screen resolution, vs duration of animation vs how far it has to animate over the course of that duration. This is also in part due to the calculations of how to break down that duration to actual distance. If you animate across 1000px in one second, and you animate across 100px in one second using the same exact code, you will notice one is more choppy than the other as the chunks of distance vs duration are different.

Again though resolution, refresh rates, and all else come into play as well. As does anything else you may have going on at the time

The difference between the two code examples you provided is that one runs the direction right upon completing direction left waiting its turn. The other the way the code reads through goes one to the other with little to no pause other than processing it.