Javascript jQuery淡出和淡出背景图像

当我单击某个链接时，我希望背景图像淡出，更改为另一个图像，然后淡出

我的守则如下：

$('.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');
    });
});

---

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

您需要在

淡出

完成后通过调用

fadeIn

来链接淡出。您可以通过使用回调函数参数来实现这一点。试试这个：

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

---

在

淡出

完成后，您需要通过调用

fadeIn

来链接淡出。您可以通过使用回调函数参数来实现这一点。试试这个：

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

---

如果您添加/删除一个具有所需图像的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');
   });
});

$（'.link'）。在（'click'，function（）上{
var image=$（this.data（'image'）；
var appendcode=''；
$（'#带有bgpimage的div'）.append（appendcode）；
$（'.added'）.css（{'opacity'：0，'display'：'block'，'z-index'：999}）.fadeIn（'3000'，function（）{
美元（本）。淡出（'3000'）；
});
});

---

我在这里使用了一些内联样式，指出您需要使包装器相对定位，附加的绝对定位，并具有更高的z索引，当然，您可以通过在CSS中包含这些元素使其更加优雅。

如果您添加/删除带有所需图像的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');
   });
});

$（'.link'）。在（'click'，function（）上{
var image=$（this.data（'image'）；
var appendcode=''；
$（'#带有bgpimage的div'）.append（appendcode）；
$（'.added'）.css（{'opacity'：0，'display'：'block'，'z-index'：999}）.fadeIn（'3000'，function（）{
美元（本）。淡出（'3000'）；
});
});

---

我在这里使用了一些内联样式，指出您需要使包装器相对定位，附加的绝对定位，并具有更高的z索引，当然，你可以通过在你的CSS中加入这些元素来让它更加优雅。

你可以将

动画

和

不透明度

结合起来，或者使用

淡出

和

淡出

功能

查看此链接以查看使用淡出和淡出的工作示例

您还可以指定一个唯一的img标记，该标记具有data gallery属性，用于存储多个url，以便图像在所有url之间切换。检查此其他链接以查看工作示例。单击按钮切换以更改图像

---

希望它有用

U可以组合

动画

和

不透明度

或使用

淡出

和

淡出

功能

查看此链接以查看使用淡出和淡出的工作示例

您还可以指定一个唯一的img标记，该标记具有data gallery属性，用于存储多个url，以便图像在所有url之间切换。检查此其他链接以查看工作示例。单击按钮切换以更改图像

---

希望它有用

我会先预加载图像，我假设它们不是。这解决了一个问题，另一个问题是，使用此解决方案，图像会逐渐变为白色，然后从白色逐渐变为另一个图像。如何在不“闪烁”的情况下使图像淡入淡出white@RafaelMoraisdosSantos正如Daryl所说，您需要预加载图像。我怎么做？我做了一次搜索，没有发现任何有用的东西，你能给我一些提示或链接吗？我会先预加载图像，我假设它们没有。这解决了一个问题，另一个问题是，使用此解决方案，图像会逐渐变白，然后从白色渐变到另一个图像。如何在不“闪烁”的情况下使图像淡入淡出white@RafaelMoraisdosSantos正如Daryl所说，您需要预加载图像。我怎么做？我做了一次搜索，没有发现任何有用的东西，你能给我一些提示或链接吗？我认为在我的示例中这不好，因为我在那个div中有视差和内容。我必须用这个复制内容。我认为在我的示例中这不好，因为我有视差和那个div里面的内容。我必须用这个复制内容。