将背景图像动画到另一个 - CSS/JQuery [重复]

Posted 2023-05-08

【中文标题】将背景图像动画到另一个 - CSS/JQuery [重复]

【英文标题】：Animate background image to another - CSS/JQuery [duplicate]

【发布时间】：2014-10-13 17:44:03

【问题描述】：

我的 HEADER 元素有一个背景图像，我需要在 3 秒延迟后将其换成另一个图像，我在互联网上找遍了，我找不到解决方案！我已经尝试过 CSS3 和 Jquery，但我无法让它工作。

由于网站的构建方式，它必须是发生变化的元素的背景图像，而不是 HEADER 元素中的嵌套 Div。

---

--- 已解决/解决方案 ---

JS

 $(document).ready(function() 
      $("header").delay(5000).queue(function() 
          $(this).css(
              "background-image": "url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"
          );
      );
  );

CSS

header 
    -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;
    -o-transition:all 1s ease-in;
    -ms-transition:all 1s ease-in;
    transition:all 1s ease-in;

【问题讨论】：

你能发布你的代码吗？

使用小提琴发布您的代码。

你想如何为它制作动画？交叉褪色？滑动？

这将帮助您发布未来的问题 - ***.com/help/mcve

我已经添加了迄今为止最好的解决方案，但它需要调整。

【参考方案1】：

之前有人问过类似的问题 - 这应该会给你一个答案

Change CSS background-image with different intervals via jQuery

【讨论】：

此解决方案完美运行，但不会在图像之间褪色。

要淡化图像背景颜色，请在元素上使用以下 CSS - 将 .2 更改为淡化的持续时间：-o-transition:background .2s ease-out, background .2s ease-in; -ms-transition:background .2s ease-out, background .2s ease-in; -moz-transition:background .2s ease-out, background .2s ease-in; -webkit-transition:color .2s ease-out, background .2s ease-in; transition:background .2s ease-out, background .2s ease-in;