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