CSS jQuery 顺序问题

Question

下面是我用于循环广告横幅的 jQuery 代码。出于某种原因，背景颜色在每个图像淡出之前都会发生变化，尽管在代码中采用了相反的方式？有人知道我在这里可能会出错吗？谢谢。 '#contentHome' Div 是内部自行车广告（类 .advertSlide 的广告）的父 DIV。父 DIV 宽度为 100%，内部的广告具有固定宽度。一个广告有蓝色背景“#103663”和另一个黑色“#000000”。代码旨在在每次图像更改时更改父 div 背景颜色。

我想实现这个顺序：

• 当前广告以自己的背景颜色淡出（bg 颜色 分配给父 DIV：contentHome)
• 然后背景颜色和/或背景图像发生变化
• 然后下一个广告 div（带图像）淡入。

本质上：淡出 > bg 变化 > 淡入

目前：

• 背景颜色变化（因此与广告不匹配）
• 然后广告淡出。
• 然后下一个广告淡入？

所以...做错了：bg Change > FadeOut > FadeIn.

这是我的代码：

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
    $("#slider > div#myDIV1.advertSlide").fadeIn(1000);
    startSlider();
});


function startSlider() {

count = $("#slider > div.advertSlide").size();

    loop = setInterval(function(){

        if(sliderNext > count) {
                sliderNext = 1;
                sliderInt = 1;
            }

if(sliderNext == 2) {
        $("#slider > div.advertSlide").fadeOut(1000).delay(500);
        $("#contentHome").delay(2000).css("background-image", "url(images/ssBackground2px.png)").css("background-repeat", "repeat").css("background-color","#103663");
            }

if(sliderNext == 1) {
        $("#slider > div.advertSlide").fadeOut(1000).delay(500);
        $("#contentHome").delay(2000).css("background-image", "none").css("background-color", "#000000");               
            }

    $("#slider > div#myDIV" + sliderNext + ".advertSlide").delay(500).fadeIn(1000);
    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;

    }, 10000)

提前感谢您提供的任何帮助。

Answer 1

除了基于效果的函数（例如fadeIn() 等）之外，我认为延迟对任何东西都不起作用。

您可以尝试使用 setTimeout，或者您可以使用 jQuery 在您的广告中添加/删除一个类，并在您的 CSS 中使用一些过渡。

然后你就可以平滑地改变背景颜色了。

elem {
    background-color:blue;
    transition:background-color 2s ease-in-out 1s;
}

elem.alt-state {
    background-color:black;
}

您可能需要更改动画持续时间 (2s) 和延迟 (1s) 以满足您的需要。此外，这不会在旧版本的 IE 中设置动画，但大多数现代浏览器应该可以很好地工作。

Answer 2

RaNdoM_PoWneD是正确的，你需要使用fadeOut回调函数：

$("#slider > div.advertSlide").fadeOut(1000,
 function()
 {
      $("#contentHome")
          .css("background-image", "url(images/ssBackground2px.png)")
          .css("background-repeat", "repeat")
          .css("background-color","#103663");
 });

我不确定他为什么删除了他的答案。背景会立即改变的原因是 jQuery 想要动画到seem asynchronous，这样开发人员就不必担心线程阻塞，直到动画完成运行。您的.fadeOut() 调用立即开始动画并由 jQuery 管理。

如果您希望任何代码在动画完成后运行，则需要在 complete callback 内（如上所示）。