淡入淡出效果看起来太亮太俗气，

Question

大家好，我修改了一些代码，我发现这些代码一旦悬停就会生成褪色的图像，但这会导致幻灯片之间出现这种白色的强烈闪光，看起来非常俗气。我用这张图片设置了黑色背景，但似乎没有什么不同。

有什么方法可以实现幻灯片之间的平滑过渡？

这也是我用过的最复杂的代码，我如何让它每 3 秒在照片之间切换一次，而不会被悬停事件触发？

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

像这样的事情是正确的吗？

// 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);

淡入淡出效果看起来太亮太俗气，

Fade in effect looks too bright and cheesy,

jquery

fadeout

fadein