gpt4 book ai didi

jquery - CSS jQuery 顺序问题

转载 作者:行者123 更新时间:2023-11-28 08:18:58 26 4
gpt4 key购买 nike

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

我想实现这个顺序:

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

本质上:FadeOut > bg change > FadeIn

此时此刻:

  • 背景颜色变化(因此与广告不符)
  • 然后广告淡出。
  • 然后下一个广告淡入?

所以...做错了: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)

在此先感谢您提供的任何帮助。

最佳答案

除了基于效果的函数(例如 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 中显示动画,但大多数现代浏览器应该可以很好地工作。

关于jquery - CSS jQuery 顺序问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28857736/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com