jquery - scrolling the background

What I wanted to achieve is a logo with png transparency and the background which automatically scrolls down so it gives an effect like it's made in flash. I used jquery.backgroundPosition.js plugin, which enables background scrolling.

The code:

HTML

<div id="logo">
    <h1><img src="img/logo.png" alt="The logo" width="420px" height="420px" /></h1>
</div>

CSS

#logo {
margin: 150px 400px;
display: block;
width: 420px;
height: 420px;
o开发者_StackOverflow社区verflow: hidden;
background: transparent url('../img/bg.jpg') repeat-y 0 -1500px;
}

JS

$(document).ready(function(){
    $('#logo').animate(
        {backgroundPosition: '0 -99999999px'},
        {duration: 5550000}
    );
});

The problem is, that in this solution animation goes very slow at first, then speeds up and after few minutes it is being done really fast. I am a javascript noob so I don't know a better solution.

There could be problem with easing. You can try to use linear easing instead of the default jswing.

$('#logo').animate(
        {backgroundPosition: '0 -99999999px'},
        {duration: 5550000, easing: 'linear'}
    );