Question

单击按钮时，我试图显示一条消息。我想要＆＃34; GO！＆＃34;淡入/淡出表示游戏的开始，但仅在单击开始按钮时。我现在正在尝试javascript使用jquery和老师的另一个库，它给出了鼠标点击和屏幕上的组合点击＆＃39; ontap＆＃39;用于移动设备的过滤器。

我将它设置为在单击按钮时添加动画类，但动画不会播放，如果我从头开始添加动画类，则播放动画，但不会在单击按钮时播放。添加javascript出了什么问题？如何实现基本点击按钮和文本淡入/淡出？

<script type="text/javascript">
$(document).ready(function() {
  $("#addFrogBut").onTap(function() {
    $("#goText").addClass(".goAnim");
  });
});
</script>

<head>
#addFrogBut {
  position: fixed;
  bottom: 20px;
  font-family: fantasy;
  font-size: 32px;
  left: 20px;
  text-transform: uppercase;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  padding: 2px 18px;
  background-color: white;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
}
#goText {
  position: fixed;
  bottom: 50vh;
  left: 42.5vw;
  color: rgba(43, 96, 162, 0);
  font-family: fantasy;
  font-size: 60px;
  text-transform: uppercase;
}
.goAnim {
  animation-name: go;
  animation-duration: 3s;
  animation-iteration-count: 1;
}
@keyframes go {
  0% {
    color: rgba(43, 96, 162, 0);
  }
  50% {
    color: rgba(0, 0, 0, 1);
  }
  100% {
    color: rgba(43, 96, 162, 0);
  }
}
</head>

<body>
<div id='addFrogBut'>Add a Frog</div>
<div id='goText'>GO!</div>
</body>

Answer 1

我通过附加一个带有单个ID的div来修复此问题，而不是将类添加到现有div中。

点击

1 个答案: