javascript - jQuery:淡出，改变背景图像，然后淡入

Question

我正在尝试使目标 div 周围的容器 div 淡入淡出，然后更改背景，然后淡入淡出。问题是此 block 中的所有函数都是即时调用的，这意味着背景会立即换出，然后 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/