[jQuery] fadeIn performance problem (with images)

[jQuery] fadeIn performance problem (with images)


Hi!
I am trying to fade a background-image with jquery which works fine on
a fast computer. But since not everybody has a fast machine, I'm
searching for a way to improve the smoothness of my animation because
it buckles on slow computers. This is my code so far:
HTML:
<div id="hintergrund" class="hintergrund clearfix" style="background-
image: url(lib.fotos/hintergruende/01.farbe.jpg);"></div>
<div id="hintergrund-2" class="hintergrund clearfix" style="background-
image: url(lib.fotos/hintergruende/01.sw.jpg);"></div>
jQuery:
$(document).ready(function(){
    var zeit = 3000;
    $('#hintergrund-2').css({display: "none"});
    farbversionEinblenden = setTimeout(function() {
        $('#hintergrund-2').fadeIn(zeit/4);
    }, zeit*2);
    altesVerstecken = setTimeout(function() {
        $('#hintergrund').css({display: "none"});
    }, zeit*2.25);
});
My idea was to place two images over each other, hide one of them and
then fading this image in. But - as I said - this is only working fine
on fast computers.
Are there any possibilies to prevent that problem or methods which
work better?
I would be glad if someone could help me.
Best regards,
Marco Philipeit