jQuery：淡出，更改背景图像，然后淡入答案

【问题标题】：jQuery: fade out, change background image, then fade injQuery：淡出，更改背景图像，然后淡入
【发布时间】：2018-09-18 03:09:30
【问题描述】：

我正在尝试淡化这个目标div周围的容器div，然后改变背景，然后将它淡入。问题是这个块中的所有函数都是即时调用的，这意味着背景会立即换出，然后 div 淡出淡入。不知道如何将其实现为分步操作。

现在，不要担心“myType”部分。我在您选择的页面上有一个下拉菜单，它根据选择将 div 中的背景图像更改为不同的图像。我已经从这段代码中删除了该功能，因为它实际上并不相关。

HTML：

<div id="itemCustomize">
  <div id="itemBaseImg"></div>
</div>

jQuery:

$(myType).change(function() {
    $("#itemCustomize").fadeOut(500);
    $("#itemBaseImg").css('background-image', 'url(myimage.jpg)';
    $("#itemCustomize").fadeIn(500);
}

更新：

真正的实现实际上是不同的。我应该考虑到这一点。我有一个图像数组，我通过使用变量“url”解析基本 URL 来生成图像 URL，然后通过调用索引添加 URL 的基本图像部分。这在它被包装在回调函数之前有效，但现在我想淡入和淡出包装器 div，它不起作用。

$(myType).change(function() {
    $("#itemCustomize").fadeOut(500, function() {
      $("#itemBaseImg").css('background-image', url + itemBaseImg[myType.selectedIndex] + ")");
    });
    $("#itemCustomize").fadeIn(500);
});

【问题讨论】：

$("#containerdiv").fadeOut(500,function(){$("#targetdiv").css('background-image', 'url(myimage.jpg)'; $ ("#containerdiv").fadeIn(500);});
那行不通。 div 淡出，再也没有回来。

标签： javascript jquery html css

【解决方案1】：

你可以在jQueryfadeOut函数上使用完整的回调，让它们一个接一个地运行。

$(select).change(function() {
    $("#containerdiv").fadeOut(500, function() {
      $("#targetdiv").css('background-image', 'url(myimage.jpg)';
      $("#containerdiv").fadeIn(500);
    });
}

见：http://api.jquery.com/fadeout/

【讨论】：

这对我不起作用。 div 淡出，然后再也不会回来。

【解决方案2】：

我想通了。我需要创建一个变量来传递给索引。感谢大家的帮助！

  $(myType).change(function() {
    var myIndex = this.selectedIndex;
    $("#itemCustomize").fadeOut(50, function() { 
      $("#itemBaseImg").css('background-image', url + itemBaseImg[myIndex] + ")");
      $("#itemCustomize").fadeIn(200);
     });
  });

【讨论】：

很高兴听到:)