Question

This is not a jquery problem But a general algorithm problem.

i have mentioned that my animation needs to work for 5 sec. On 1024 to 1600 monitor it woks fine. But on smaller monitor it’s too fast. How do i slowdown based on screen width. i.e animation needs to calculated based on screen width,

say i mention for 1024 width it needs to work for 7 sec. Even if the screen decreases it should work for 7 sec.

Again on larger monitor since width is more again and time is less (7 sec) the animation is again fast so here again the time has to be increased.

Final effect from ratio of both needs to be same

Here is my code in case any one has a jquery solution

$("#plane").css({
    'margin-left'   : $(window).width() - 300,
    'position'  : 'absolute'
}).animate({
    "margin-left" : '35%'
}, 5000, 'linear', function(){
    $(this).animate({
        "opacity"       : 0,
        "margin-left"   : 0
    }, 2200, 'linear')
});

Answer 1

You can calculate the desired time.

It sounds like you’re describing an algorithm where if the window is less than 1024 px wide, then you want 7 seconds, but if greater than that, you want it to take longer. So, let’s say we scale the time linearly above 1024px so if it’s 2048px wide then it would take 14 seconds. That can be described with this calculation:

var animTime = 7000;
var width = $(window).width();
if (width > 1024) {
    animTime += Math.floor((width - 1024) / 1024) * 7000);
}

You could then split that time between your two pieces of the animation:

$("#plane").css({
    'margin-left'   : $(window).width() - 300,
    'position'  : 'absolute'
}).animate({
    "margin-left" : '35%'
}, Math.floor((5/7) * animTime), 'linear', function(){
    $(this).animate({
        "opacity"       : 0,
        "margin-left"   : 0
    }, Math.floor((2/7) * animTime), 'linear')
});