Fade in effect looks too bright and cheesy,

Question

Hi guys I modified some code I found to generate images fading once hovered over, but it causes this white intense flash between slides which looks really cheesy. I set a black background with this image but it did not seem to make a difference.

What is a way to achieve smooth transitions between slides?

Also this is the most complicated code I have worked with, how do I get this to just switch between photos every 3 seconds without it being triggered by the hover event?

setTimeout(function(){
    $('.photo-holder').hover(
        function () {
            $(this).stop().fadeOut("100", function () {
                $(this).css("background",      "url('http://tbc/images/ropes.jpg')").fadeIn(100);
            });
        }, 
        function () {
            $(this).stop().fadeOut("1000", function () {
                $(this).css("background",   "url('http://tbc/images/weights.jpg')").fadeIn(1000);
                700
            });
        }
    );
    700
});

Answer 1

Would something like this be along the right lines?

// You may want to preload these images 
var photos = ['ropes.jpg', 'weights.jpg'];
var currentPhoto = 0;

function changePhoto() {
    $('.photo-holder').fadeOut(function() {
        $(this).css('background-image', 
                    "url('http://tbc/images/" + photos[currentPhoto] + "')");
        currentPhoto = (currentPhoto + 1) % photos.length;
    }).fadeIn();
}

setInterval(changePhoto, 3000);