How to trigger / stop via jquery an animation in css (which is being triggered by css hover)

Question

How to trigger / stop via jquery an animation in css (which is being triggered by css hover)

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Follow the example above that I created, from an animation hover css-driven link .

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

I would like to start this animation via jQuery (without hovering) to get more control of the animation (Start / Stop), so I tried using addClass () w3schools link and to give the 'stop' the removeClass ().

But the animation does not 'Starta' when I click the button, it's just adding the class, can someone tell me what I'm doing wrong in the code? Thankful

javascript jquery css css3

asked by anonymous 19.07.2016 / 22:02

2 answers

1

Example here in JSFiddle .

No css modified it:

.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 "Start" only when you have the mouse on it because it has hover , focus , and active , this will solve your problem!

I have also modified Html to not trigger the effect on page load, but only when I click the Do it! / p>

From 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>

I removed class hvr-ripple-out .

19.07.2016 / 22:32

Array that is becoming object [closed] error sending e-mail with phpmailer

score 1 · Accepted Answer

This 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><ahref="#"><span id="badgeAnimation" class="badge">&nbsp;</span></a>
        </pre>

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