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

Question

我试图淡入淡出容器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);
});

Answer 1

您可以对jQuery fadeOut函数使用完整的回调，以使它们一个接一个地运行。

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

请参阅： http ： //api.jquery.com/fadeout/

Answer 2

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

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