如何用jQuery为div的background-image添加animate.css动画类？

首先得明确：Animate.css的动画类是直接作用在DOM元素上的，而background-image只是元素的一个CSS属性，你没法直接给这个属性对应的"背景图"添加类——这就是你之前代码出错的原因：

• 第一段代码里，$('#mydiv').css('background-image')返回的是字符串（比如url("your-image.jpg")），不是DOM元素，所以$(psd)根本不是有效的jQuery对象，调用.addClass()自然会报错。
• 第二段代码是筛选出有background-image的div，然后给整个div加动画类，所以整个div都会动，这显然不是你想要的效果。

那怎么让背景图单独动起来？核心思路是：把背景图变成一个独立的"元素"（可以是伪元素，也可以是真实的子元素），然后给这个元素加Animate.css的动画类。下面是两种常用的解决方案：

方案1：使用伪元素承载背景图 #

用::before或::after伪元素来单独承载背景图，这样动画只会作用在伪元素上，父div的内容不受影响：

HTML #

<div id="mydiv">
  <!-- 这里放你的div内容，比如文字、按钮等 -->
</div>

CSS #

#mydiv {
  position: relative; /* 让伪元素相对于它定位 */
  width: 300px;
  height: 300px;
  /* 不要在这里设置background-image，交给伪元素 */
}

#mydiv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("your-image-url.jpg"); /* 你的背景图地址 */
  background-size: cover;
  background-position: center;
  z-index: -1; /* 让伪元素在div内容的下方，作为背景 */
  /* 直接应用Animate.css的动画逻辑，对应pulse无限循环动画 */
  animation: pulse infinite 2s;
}

如果已经引入了Animate.css，也可以通过父元素的类关联伪元素的动画：

#mydiv.animate-bg::before {
  animation: pulse infinite;
  animation-duration: var(--animate-duration);
}

然后用jQuery触发：$('#mydiv').addClass('animate-bg')

方案2：用子元素作为背景层 #

创建一个专门的子元素来承载背景图，把它放在父div的底层，然后给这个子元素加动画类：

HTML #

<div id="mydiv">
  <div class="bg-layer animated infinite pulse"></div>
  <!-- 这里放你的div内容 -->
</div>

CSS #

#mydiv {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden; /* 防止背景图溢出 */
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("your-image-url.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1; /* 让背景层在内容下方 */
}

这样animated infinite pulse类直接作用在.bg-layer上，只会让背景图产生脉冲动画，父div的内容完全不受影响。

这两种方法都能完美实现你想要的"背景图单独动画"的效果，你可以根据自己的代码结构选择更合适的一种。

内容的提问来源于stack exchange，提问作者Panoman