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>
addClass(".goAnim")
you just need to specify a class name<style>
?<script>
must be inside<head>
or<body>
.fadeIn && fadeOut
jQuery functions