Focus issue of cursor on Internet Explorer

Question

I have the following code to autochange background images.

function changeBackground() {
    currentBackground++;
    if(currentBackground > 3) currentBackground = 0;

    $('body').fadeOut(0, function() {
        $('body').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('body').fadeIn(0);
    });


    setTimeout(changeBackground, 3000);

I have a simple form in the front. In internet explorer, this form focus seems to go each time the image changes but works well in Chrome and Firefox

Answer 1

jQuery's fadeOut animates opacity down to 0 and then sets display: none.

I think Internet Explorer takes focus away from the form when its inside a display: none container.

You could try using animate() instead:

$('body').animate({ opacity: 0}, 0, function() {
    $('body').css({
        'background-image' : "url('" + backgrounds[currentBackground] + "')"
    });
    $('body').animate({ opacity: 1 }, 0);
});

One question: you're using instant transitions (passing a duration of 0), so why are you calling fadeIn/fadeOut? (it looks like the css() call would be enough on its own)