javascript - 在带有图像的类别中淡入淡出

Question

你好，我想要完成的是当用户点击一个按钮时，它会淡出问题和按钮并淡入新的问题和按钮。问题和按钮是图像，所以我试图做的是创建一个类并添加背景图像:url("../img/"image.jpg"); 但它甚至没有使图像出现。那么有什么方法可以让我在单击按钮后淡入问题和按钮的新图像。

//functions
function clickimageone(l) {
  alert("test");
  question1button1 = true;
}

.questiontwo {
  background: url('../img/secondquestion.jpg');
  background-size: cover;
  height: 50px;
  margin: auto;
}

<img src="img/firstquestion.jpg" onclick="questionone()" class="question1" style="height: 350px; width: 600px; position: absolute; top: 130px; left: 620px">
<div class="image"><img src="img/500.png" onclick="clickimageone(this)" class="border1" style="height: 500px; max-height: 150px;  max-width: 300px; position: absolute; top: 500px; left: 650px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; position: absolute; top: 500px; left: 780px"></div>
<div class="image"><img src="img/1500.png" onclick="clickimagethree(this)" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; position: absolute; top: 500px; left: 910px"></div>
<div class="image"><img src="img/2000.png" onclick="clickimagefour(this)" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; position: absolute; top: 500px; left: 1040px"></div>
<div class="questiontwo"></div>


<Script>
  $('.border1').click(function(e) {    
    $('.image, .border1, .border2, .border3, .border4, .question1, .contentanswer, .contentbackground')
      .fadeOut('slow', function() {
         $('.questiontwo').fadeIn('slow');
    });
  });
</Script>

Answer 1

我已经使用简单的 setTimeout 更新了您的代码，并且我还将 background 更改为 background-image 属性，因为据我所知， transition 不适用于 background 属性，但适用于 background-image。

/*http://icons.iconarchive.com/icons/iconsmind/outline/512/Chemical-icon.png*/

$('#btn').on('click', function() {
  setTimeout(function() {
    $('.divWithImage').css("background-image", "url('http://icons.iconarchive.com/icons/iconsmind/outline/512/Chemical-icon.png')")
  }, 1000)
})

.divWithImage {
  background-image: url('https://i.vimeocdn.com/portrait/58832_300x300');
  background-size: cover;
  height: 500px;
  width: 500px;
  margin: auto;
  
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Change image</button>
<div class="divWithImage"></div>

你也可以看看jquery-bgswitcher插件。