How to launch/stop via jquery a css animation (which is being triggered by css Hover)

Question

https://jsfiddle.net/x1mmgryw/2/

Follow the example above that I created, from a page animation driven by Hover css http://ianlunn.github.io/Hover/.

But animation only works if the mouse is on top of the element.

I would like to activate ('Startar') this animation via jQuery (without needing the Hover) to have more control of the animation (Start/Stop), so I tried to use addClass() w3schools http://www.w3schools.com/jquery/jquery_css_classes.asp and to stop removeClass().

But the animation not 'Starta' when I click on the button, it’s just adding the class, can anyone tell me what I’m doing wrong in the code? Grateful

Answer 1

That solves your problem:

              $("#doIt").click(function()
              {
                //Start animação
                //alert("ok");
                $("#badgeAnimation").addClass('hvr-ripple-out'); 
              });

              $("#stopAnimation").click(function()
              {
                $("#badgeAnimation").removeClass('hvr-ripple-out'); 
              });

            /* Ripple Out */
            @-webkit-keyframes hvr-ripple-out {
              100% {
                top: -12px;
                right: -12px;
                bottom: -12px;
                left: -12px;
                opacity: 0;
              }
            }

            @keyframes hvr-ripple-out {
              100% {
                top: -12px;
                right: -12px;
                bottom: -12px;
                left: -12px;
                opacity: 0;
              }
            }

            .hvr-ripple-out {
              display: inline-block;
              vertical-align: middle;
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              box-shadow: 0 0 1px rgba(0, 0, 0, 0);
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;a
              -moz-osx-font-smoothing: grayscale;
              position: relative;
              border:1px solid black;
              border-radius:35px;
              animation-iteration-count: infinite;
            }
            .hvr-ripple-out:before {
              content: '';
              position: absolute;
              border: #e1e1e1 solid 6px;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              -webkit-animation-duration: 1s;
              animation-duration: 1s;
                border:1px solid black;
                 border-radius:35px;
                 animation-iteration-count: infinite;
            }
            .hvr-ripple-out:before, .hvr-ripple-out:before, .hvr-ripple-out:before {
              -webkit-animation-name: hvr-ripple-out;
              animation-name: hvr-ripple-out;
            }

            .badge{
                background-color:black;
                width: 50px;
                height: 50px;
              display: inline-block;
              vertical-align: middle;
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              box-shadow: 0 0 1px rgba(0, 0, 0, 0);
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;a
              -moz-osx-font-smoothing: grayscale;
              position: relative;
              border:1px solid black;
              border-radius:35px;
              animation-iteration-count: infinite;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre>
            <a href="#"><span id="badgeAnimation" class="badge">&nbsp;</span></a>
        </pre>

        <button id="doIt">Do it!</button>
        <button  id="stopAnimation" >Stop</button>

Answer 2

Example here on Jsfiddle.

In the css I modified this:

.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
   -webkit-animation-name: hvr-ripple-out;
   animation-name: hvr-ripple-out;
}

for this:

.hvr-ripple-out:before {
   -webkit-animation-name: hvr-ripple-out;
   animation-name: hvr-ripple-out;
}

because the effect was "startando" only when you had the mouse on top because you have the hover, focus and active except this already solves your problem!

I also modified in the Html not to trigger the effect when loading the page, but only when clicking on the button Do it!

Of this:

<a href="#"><span id="badgeAnimation" class="badge hvr-ripple-out">&nbsp;</span></a>

For this:

<a href="#"><span id="badgeAnimation" class="badge">&nbsp;</span></a>

removed the class hvr-ripple-out.