CSS jQuery 顺序问题

Posted

技术标签:

【中文标题】CSS jQuery 顺序问题【英文标题】:CSS jQuery order issue 【发布时间】:2015-05-05 15:14:21 【问题描述】:

下面是我用于循环广告横幅的 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)

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

【问题讨论】:

之前有评论关于在fadeOut中添加背景颜色更改作为回调。刚刚尝试过,代码横幅仍按要求循环,但背景颜色仍在淡出之前发生变化。 FadeOut 时间为 1000,背景更改的 .delay 设置为 2000。是 .delay 的问题吗?我的意图是这会将背景更改延迟到淡出完成之后。 图像在蓝色背景上淡出(比如说蓝色图像)。剩下的就是蓝色背景。这将变为黑色背景。新图像现在淡入(比如说黑色图像)。该图像(几秒钟后)然后淡出。剩下的就是黑色背景。这将变为蓝色背景。下一张图像淡入。等等。我不太清楚你所说的不匹配是什么意思。对我来说,上面的顺序是否意味着背景总是与图像的颜色相匹配?抱歉,如果我在这里遗漏了什么。 谢谢皮特,这看起来像我所追求的,太好了,还没有尝试过,但你的示例功能就像我所追求的那样。我在问题中错误地提出的唯一一件事是,需要更改颜色的 div 是滑块 div 上方的一个。因此,包含“滑块 div”的 Div 和需要更改颜色的是子“广告”div,而不是 Slider Div。您的代码是否易于适应不同的“选择器 div”上的颜色变化。另外,您知道您使用的数据标签的支持程度吗?谢谢 在您的示例中,Pete '#slider' 定义了幻灯片的大小,这很好并且符合我的需要,但它是#slider 位于内部的 Div,需要 100% 的宽度并具有这是背景颜色的变化。感谢您的帮助。 【参考方案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 中设置动画,但大多数现代浏览器应该可以很好地工作。

【讨论】:

谢谢托尼,我修改了我的代码如下并创建了两个 css 类堡垒。但是现在背景一直是黑色的? if(sliderNext == 2) $("#slider > div.advertSlide").fadeOut(1000, function() $("#contentHome").removeClass("blackHome") .addClass("blueHome"); ); if(sliderNext == 1) $("#slider > div.advertSlide").fadeOut(1000, function() ("#contentHome").removeClass("blueHome").addClass("blackHome"); ) 当你检查元素时,你能看到类的变化吗? 啊,是的,但它被另一个背景颜色控制了:#000000 某处。我想这可能是我在css中添加到div中的初始黑色,所以在运行jQuery之前第一次是黑色的? 我将类“blackHome”添加到 div 作为默认类,并删除了我在 css 中的 Div 上的 bg 属性,现在它可以更改颜色。但令人讨厌的是,它仍然在 fadeOut 发生之前而不是之后改变背景颜色。【参考方案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 内(如上所示)。

【讨论】:

在我的每个“if”语句中,您上面的代码是我添加的,唯一的区别是我在 .css 之前的 ("#contentHome") 之后有一个 .delay(2000)开始。在淡出之前,这仍在改变背景。我会尝试删除 .delay。 去掉.delay后,还是按原来的顺序播放

以上是关于CSS jQuery 顺序问题的主要内容,如果未能解决你的问题,请参考以下文章

js和jquery的区别

6.6

jquery 如何控制js加载顺序

jQuery 动画故障:当鼠标快速移动时,函数以错误的顺序触发

a标签伪类顺序以及jQuery选择器

如何使用 JQuery 控制基于 CSS 的 SVG 动画?