0

I'm trying to have a message appear when a button is clicked. I want to have "GO!" fade in/out to signify the start of a game but only when a start button is clicked. I'm trying javascript at the moment using jquery and another library from a teacher which gives a combination of on mouse click and on screen tap as 'ontap' for lter use with mobiles.

I have it set to add the animation class when the button is clicked but the animation won't play, if I add the animation class from the beginning then the animation plays but not when the button is clicked. What went wrong with adding javascript and how can I achieve the basic click button and text fades in/out?

<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>
5
  • 2
    remove a dot here addClass(".goAnim") you just need to specify a class name
    – The Reason
    May 9, 2016 at 7:59
  • 1
    shouldn't the CSS code be inside <style> ? May 9, 2016 at 8:01
  • 1
    <script> must be inside <head> or <body>.
    – Mohammad
    May 9, 2016 at 8:02
  • Actually you can do it much simpler just using fadeIn && fadeOut jQuery functions
    – The Reason
    May 9, 2016 at 8:08
  • I did have <style> and <head> I just removed some parts of the code to make it easier to read, sorry if that caused any confusion
    – Arran
    May 10, 2016 at 6:07

1 Answer 1

0

I fixed this by appending a whole div with a single ID rather than adding a class to an existing div.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.