javascript - 球放入盒子时如何改变图像？

我正在尝试使用css或jquery进行一些动画处理。我在运行项目时将球放入盒子中。如果要将球成功插入盒子中，我想更改图像。

这是我的代码
https://jsbin.com/coyarezeto/1/edit?html,css,output

.container {
  margin: 10px;
}

.circle0 {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  background: PaleTurquoise;
  position :relative;
  -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s;
  animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */

}
.newImage{
  display:none;
  position :absolute;
  top:250px
}

@-webkit-keyframes mymove {
  from {top: 0px;}
  to {top: 200px; opacity: 0}
}

/* Standard syntax */
@keyframes mymove {
  /* from {top: 0px;}
  to {top: 250px;opacity: 0.2} */
  0% {
    top: 0px;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 250px;
    opacity: .3;
    display:none
  }
}
.img{
  position :absolute;
  top:250px
}

5秒后将球插入盒子时，我想更改image

 <img class="newImage" width="100" src="https://previews.123rf.com/images/boygointer/boygointer1511/boygointer151100234/49187556-open-gift-box-over-white-background-3d-illustration.jpg"

最佳答案

我不认为CSS可以做到这一点，但是jquery可以通过以下代码来做到这一点：

function imgChange(){
setTimeout(function(){ $('.img').attr({'src' : 'insertnewimg'}); }, 5000);
}

function ballTouch(){
//yadda yadda code that makes the ball move and detects when its ina box
if(ballIsInTheBox == true)
imgChange();
 }


ballTouch();

setTimeout使程序在执行其中的代码之前等待x，在这种情况下为5000毫秒（1000毫秒= 1秒），这将更改jQuery中的图像src。祝你好运，让我知道我是否搞砸了。注意：请记住setTimeout不会停止整个程序，只是会延迟其中的功能。

关于javascript - 球放入盒子时如何改变图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57121728/