Question

当我点击某个链接时，我希望背景图像为fadeOut，然后更改为另一个图像然后淡入。

我的代码：

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').css('background-image', 'url('+image+')');
})

我试过了：

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').fadeOut('3000').fadeIn('3000').css('background-image', 'url(' + image + ')');
})

但这没有用，我做错了什么？（我是jQuery的新手）

修改

我用Rory McCrossan的回答解决了这个问题：

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').fadeOut('3000', function() {
        $(this).css('background-image', 'url('+image+')').fadeIn('3000');
    });
});

但是现在这渐渐变成了白色背景，然后淡入图像，给人一种闪光的感觉？有没有办法加载图像？

Answer 1

您需要在fadeIn完成后调用fadeOut来链接淡出。您可以使用callback函数参数执行此操作。试试这个：

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').fadeOut('3000', function() {
        $(this).css('background-image', 'url('+image+')').fadeIn('3000');
    });
});

Answer 2

如果您使用所需的图像追加/删除div并且不在后台更改任何内容，这会不会更简单？举个例子：

 <div data-image="some-other-image.jpg" class="appendhere" style="position:relative">some content and an image background here</div>

现在使用jQuery，您可以将图像放在上面的数据属性中，使用0不透明度，淡入淡出：

 $('.link').on('click',function(){
   var image = $(this).data('image');
   var appendcode = '<div class="appended" style="display:none;position:absolute;width:200px;height:200px;overflow:hidden"><img src="' + image + '"></div>';
   $('#div-with-the-bgimage').append(appendcode);
   $('.appended').css({'opacity': 0, 'display':'block', 'z-index': 999}).fadeIn('3000', function() {
     $(this).fadeOut('3000');
   });
});

我在那里使用了一些内联样式来指出你需要使包装器相对定位并且附加的绝对位置和更高的z-index，你可以通过在CSS中包含它们来使它更加优雅。

Answer 3

您可以合并animate和opacity，或使用fadeOut和fadeIn功能。

查看此链接jsfiddle以查看使用fadeOut和fadeIn的工作示例。

U还可以指定一个唯一的img标记，其中data-gallery属性存储多个图像用于在所有图像之间切换。请查看此其他链接jsfiddle以查看有效示例。单击按钮切换以更改图像。

希望它有用！

jQuery fadeOut和fadeIn background-image

3 个答案: