Jquery 背景推子答案

【问题标题】：Jquery Background FaderJquery 背景推子
【发布时间】：2014-06-15 02:06:52
【问题描述】：

我有一个可以运行的脚本，但是背景图像“弹出”而不是平滑地淡入和淡出。他们立即改变。我现在只测试 2 个背景，而不是 4 个。

这是我的新Fiddle。

它只是在第一个背景图像和第四个背景图像之间切换。

编辑：新的 JQuery 如下：

$(document).ready(function(){
    setInterval(function() {
      $("body").toggleClass('background2', 1000);
      $("body").toggleClass('background3', 1000);
      $("body").toggleClass('background4', 1000);
    }, 3000);
});

【问题讨论】：

为什么不使用fadeIn和fadeOut？
我真的不会写 jquery。学习。所以使用： $body.fadeIn('background2', 1000);例如？
stackoverflow.com/questions/7319552/…
这里没有尝试平滑淡出的代码。
Popnoodles，这就是我寻求帮助的原因。 :) 制造商，现在检查那个堆栈。如果有帮助会发布答案。

标签： jquery background duration fading

【解决方案1】：

您必须使用 jQuery UI 的 toggleClass() function。

$(element).toggleClass('otherClass', duration);

在您的情况下，您将主体的初始类设置为 background1 并在其他类之间切换。我已经为你设置好了here，但你什么都看不到的原因是因为你所有的类都指向同一张图片。

您可以在here 中看到它，我在其中注释掉了您的图片并使用了简单的颜色。

【讨论】：

啊，我明白这是怎么回事了。感谢您的帮助。当我取出颜色并尝试使用图像时，它仍然会立即弹出，没有过渡。 background1 和 background2 是不同的，但 background2 的唯一区别是略带绿色。我希望这是一种微妙的背景效果。有什么方法可以使用 RGBa 并在 1 个原始背景图像上叠加 0.2 不透明度颜色 4 次？
@FlannelBeard 我更新了第一个链接以切换所有四个课程，除非我的眼睛在欺骗我（这完全有可能），我看不出它们之间的任何变化。他们不应该介入：我认为它最初会这样做的唯一原因是因为它必须在将其设置为背景之前从外部源加载图像，在这种情况下，我建议下载图像并在本地使用它。
不可能，它重复了一个小 png。这是我的dev theme。我将这些背景图像的饱和度设置得很高，这样您就可以看到差异。仍然弹出。我今晚通过这个学习了很多jquery，所以谢谢。我想知道为什么它不褪色……它用颜色来做。唔。另一个问题是它现在只能在第 4 类之间切换。也许我们需要一个数组？
@FlannelBeard 它可能无法淡入图像，因为这些图像是如何连接的并不是很明显。在你看来，这些图像是相同的，只是略有不同，但 jQuery 除了它们是不同的图像这一事实之外，什么都不知道。
另外，为了对抗所有其他人的言论，您不能真正使用fadeIn() 和fadeOut()，因为您正在更改背景图像。除非您想在整个页面上覆盖 div，否则这些对您没有多大帮助。

【解决方案2】：

使用 jquery 淡入和淡出。看看这个简单的例子：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

【讨论】：

我知道，但是 addClass / removeClass 不能包含一个 fadeIn fadeOut。它有持续时间，但不影响淡入淡出。
您不能使用添加/删除类。您只能淡入/淡出一个元素。以下是在不同背景图像中使用淡入淡出的示例：stackoverflow.com/questions/17825194/fade-in-background-jquery