How to make a marquee cycle once at a button click?

Question

What I am trying to achieve is so that a marquee plays once when I click the button. My problem is that if I set the loop to 1 then it only plays once and then does nothing. My other problem is that it stops midway with my current code if I let go of the left mouse button. Or it stops where it was. Is there any way to make it either play once when the button is pressed and then play again whenever the button is pressed again and allow it to complete the loop completely. Here is the code, I am open to using java script instead of html. Here is my current code:

<marquee behavior="scroll" direction="up" scrollamount="30" id="marquee" height="40">
  <p>+1</p>
</marquee>

<input type="button" id="gather" class="build" Value="play" onmousedown="document.getElementById('marquee').start()." onmouseup="document.getElementById('marquee').stop()" onload="document.getElementById('marquee').stop()">

Answer 1

You can use CSS keyframes and JQuery (or Javascript) in order to accomplish that.

In the example below, I'm using CSS rules to achieve the animation effect, and applying it adding/removing the span element from te DOM using JQuery.

Code example:

var marquee = '<span class="anim">+1</span>';

$('.btn').click(function(){
  $('.anim').remove(); //remove the node if its there
  $('.marquee').append(marquee); //append the node
});

.marquee{
  width: 20px;
  height: 20px;
  overflow:hidden;
}

.marquee > span {
  position:relative;
  top:-100%;
  left:0;
  
}

.anim{
  animation-name: example;
  animation-duration: 2s;
}


@keyframes example {
  0%,100% {
    opacity:0;
    top:100%;
  }
  50% {
    opacity:1;
    top:0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee"></div>
<button class="btn">Click here!</button>

Answer 2

Are you willing to use pure CSS?

It seems like you want a "+1" counter on click. You can accomplish this using CSS transitions. I'm going to use an anchor rather than an input, because you have more control over styling it.

You'll probably want to add some movement to it, change the timing, maybe swap linear to ease-out, but this is a starting point. Please consider it a proof of concept.

HTML:

a.play {
  padding:6px 8px;
  border-radius:4px;
  background:#ccc;
  border:1px solid #bbb;
  text-decoration:none;
  color:#111;
  position:relative;
  }
a.play:focus:before,
a.play:active:before {
  Content:"+1";
  position:absolute;
  top:-16px;
  left:6px;
  color:#006699;
  font-weight:bold;
      -webkit-animation: fadeinout 1.3s linear forwards;
    animation: fadeinout 1.3s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  10% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  10% { opacity: 1; }
}

<div style="height:60px;"></div>
<a href="#" class="play">Play</a>