文章/答案/技术大牛

发布

社区首页 >问答首页 >背景图像属性不能被jquery更改

问背景图像属性不能被jquery更改
EN

Stack Overflow用户

提问于 2017-07-07 20:53:24

回答 2查看 76关注 0票数 0

就像标题所说的，由于某些原因，我的函数不想对background-image属性执行更改。我还让该函数更改了background-color，以检查它是否正常工作。所以看起来问题不在语法上。

function feedSlide () {
  var x = [
    '../img/feed1.png', 
    '../img/feed2.png', 
    '../img/feed3.png',
    '../img/feed4.png'
  ];
  var y = ['green', 'red', 'blue', 'yellow'];
  for (var i = 0; i < x.length; i++) {
    setTimeout(function(z) { return function() { 
      console.log(x[z]); 
      $('#feedback').css({"background-image" : "url(" + x[z] + ")"});
      $('#feedback').css({"background-color" : y[z] });
    }; }(i), 1000*i);
  }
}

#feedback {
  width: 400px;
  text-align: justify;
  padding: 10px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aboutDiv">
  <div id="feedback"></div>
  <div id="audio"></div>
</div>

我已经用了好几个小时了，除了background-image，所有的东西似乎都是可变的。任何信息都非常受欢迎。

jquery

css

background-image

javascript

回答 2

Stack Overflow用户

发布于 2017-07-09 00:41:21

每次尝试解决这个问题都失败后，我在CSS动画中找到了解决方案。

 #feedback {
  height: 110px;
  width: 380px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation-name: feedSlide;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
 }  

@keyframes feedSlide {
 0.00% {background-image: url(../img/feed1.png); opacity: 0;}
 3% {opacity: 1;}
 22% {opacity: 1;}
 25% {background-image: url(../img/feed1.png); opacity: 0;}
 26% {background-image: url(../img/feed2.png); opacity: 0;}
 29% {opacity: 1;}
 47% {opacity: 1;}
 50% {background-image: url(../img/feed2.png); opacity: 0;}
 51% {background-image: url(../img/feed3.png); opacity: 0;}
 54% {opacity: 1;}
 72% {opacity: 1;}
 75% {background-image: url(../img/feed3.png); opacity: 0;}
 76% {background-image: url(../img/feed4.png); opacity: 0;}
 79% {opacity: 1;}
 97% {opacity: 1;}
 100% {background-image: url(../img/feed4.png); opacity: 0;}
}

票数 0

Stack Overflow用户

发布于 2017-07-09 01:02:12

你可以试试下面的代码，

function feedSlide () {
  var x = [
    'feed1.png', 
    'feed2.png', 
    'feed3.png',
    'feed4.png'
  ];
  var y = ['green', 'red', 'blue', 'yellow'];
  for (var i = 0; i < x.length; i++) {
    setTimeout(function(z) { return function() { 
      console.log(x[z]); 
      var element = document.getElementById('#feedback');
      element.style.backgroundImage = "url('img/" + x[z] + "')";
      element.style.backgroundColor = y[z];
    }; }(i), 1000*i);
  }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44971281

复制

相似问题

问背景图像属性不能被jquery更改
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图像属性不能被jquery更改EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图像属性不能被jquery更改
EN