Question

您好，我想要完成的是当用户点击按钮时，它会淡出问题和按钮并淡入新问题和按钮。问题和按钮是图像，所以我尝试做的是创建一个类并添加background-image：url（＆＃34; ../ img /＆＃34; image.jpg＆＃34;）;但它甚至不会使图像出现。那么有什么方法可以在点击按钮后淡出问题和按钮的新图像。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

background-image

＆＃13;

/*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)
})

＆＃13;

.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;
}

＆＃13;

＆＃13; 您还可以查看jquery-bgswitcher插件。

在图像中消失

1 个答案: