jquery 添加 class 到背景图片

Question

我想使用 animate.css 为 div 的背景图像设置动画（例如应用脉冲效果）。我必须将所需的动画类添加到我想要以以下格式设置动画的任何元素：

<img class="animated infinite pulse">

现在我的问题是如何将这些类添加到 div 中的背景图像？我尝试使用 jquery select 背景图像并向其添加类但出现错误：

var psd = $('#mydiv').css('background-image');
$(psd).addClass("animated infinite pulse");

或其他代码：

$('#mydiv').filter(function() {
    return $(this).css("background-image"); 
}).addClass('animated infinite pulse');

最后的代码将动画类添加到整个 div 并使整个 div 具有动画效果。请帮忙解决这个问题。

Answer 1

您应该 addClass() 使用 background-image 而不是 css 属性.

的元素

var psd = $('#mydiv'); // This has background image already
$(psd).addClass("animated infinite pulse");

#mydiv {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg');
  width: 300px;
  height: 300px;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" />
<div id="mydiv"></div>

或固定background-image:

var psd = $('#mydiv'); // This has background image already
$(psd).addClass("animated infinite pulse");

#mydiv {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg');
  width: 300px;
  height: 300px;
  background-size: cover;
}

#parent {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" />
<div id="parent">
  <div id="mydiv"></div>
</div>

jquery 添加 class 到背景图片

jquery add class to background-image

jquery

animate.css