Question

我需要用其他图像更改背景div。

我首先想要的是，myDiv在css样式上加载第一个背景图像，然后在延迟的2/3秒内添加淡入淡出效果来改变背景图像。

如果可能的话，我需要用jQuery做到这一点。

Answer 1

您不能直接在背景图像上进行淡入淡出或任何其他过渡。但是，您可以添加另一个div，其中第二个图像作为背景，fadeOut()是原始图像。

Answer 2

这样做你想要的吗？ http://jqueryfordesigners.com/image-loading/

编辑：谷歌搜索 - 这听起来像你想要做的...... http://www.magneticwebworks.com/jquery-rotating-page-background/

编辑：另一个去 - 这是？ http://css-tricks.com/forums/discussion/9621/solved-is-it-possible-to-add-jquery-cycle-to-background-imagess/p1

Answer 3

这不是淡入淡出效果，但你可以像这样延迟和改变背景图像。

function changebackground(){
    $('#divID').css("background-image", "url(/myimage.jpg)");  
}


setTimeout(function() { changebackground();}, 3000);

Answer 4

这可能是一个很好的解决方法 http://jquery.malsup.com/cycle/

在你用循环定位在顶部div之后它可以是你的背景 - cycle.js给你很多选择。

如果您只想在bacground中旋转图像，则必须首先预加载该图像，然后必须将其放在其他div中，以便两个div都可以设置动画。

Answer 5

即使您添加了jQuery UI的所有功能，也不支持此功能。

你可以附加一个临时图像，绝对位于你想要改变背景的div内。让图像淡入，一旦它完全不透明，交换div的背景图像。但是，如果你有重复的背景，这将是有问题的。

var im1 = 'picture1.png';
var im2 = 'picture2.png';
$('#divID').css({'background-image': 'url("'+im1+'")', 'position': 'relative'});
$('#divID').on('click', function() {
    var img = $('<img />', {
        src: im2,
    }).css({
        position: 'absolute',
        top: 0,
        left: 0
    }).hide();

    $(this).append(img);
    img.fadeIn('slow', function() {
        $(this).parent().css('background-image', 'url("'+im2+'")');
        $(this).remove();
    });
});

当然，您应该将我脚本中包含的CSS移动到.css文件中，并使用类来代替更易读的代码。

用jQuery更改div背景

5 个答案: