Question

我使用Jquery滚动背景图像，工作正常。但是，我试图使图像之间的过渡更平滑，似乎不起作用。我确定它与我使用的“fadeOut”行有关。

$(function() {
var body = $('body');
var backgrounds = new Array(
    'url(images/hso-boardwalk-background.jpg)',
    'url(images/hso-palmtree-background.jpg)' 
);

var current = 0;

function nextBackground() {
body.css(
   'background',
    backgrounds[current = ++current % backgrounds.length]
);

 setTimeout(nextBackground, 5000);
    $('background').fadeOut("slow");
 }
 setTimeout(nextBackground, 5000);
   body.css('background', backgrounds[0]);
});

Answer 1

您无法仅使用正文背景图像进行平滑过渡。作为解决方法，您可以尝试使用临时DIV：

SEE DEMO

$(function () {
    var body = $('body');
    var backgrounds = new Array(
       'url(images/hso-boardwalk-background.jpg)',
       'url(images/hso-palmtree-background.jpg)' 
    );


    var current = 0;

    function nextBackground() {
        var bckg = backgrounds[current = ++current % backgrounds.length];
        var tmpDIV = $('<div/>', {
            id: "tmpDIV"
        }).prependTo('body').hide().css({
            position: "absolute",
            zIndex:-1,
            top:0,
            left:0,
            height: $(window).height(),
            width: $(window).width(),
            background: bckg
        }).fadeIn("slow", function () {
            body.css('background',bckg);
            $(this).remove();
        });


        setTimeout(nextBackground, 5000);

    }
    setTimeout(nextBackground, 5000);
    body.css('background', backgrounds[0]);
});

Jquery fadeIn和fadeOut后台命令

1 个答案: