0

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

Segue o exemplo acima que criei, de uma animação acionada por hover css da página http://ianlunn.github.io/Hover/.

Porem a animação só funciona se o mouse estiver em cima do elemento.

Gostaria de acionar ('Startar') essa animação via jQuery (sem precisar do hover) para ter maior controle da animação (Start/Stop), para isso tentei usar o addClass() w3schools http://www.w3schools.com/jquery/jquery_css_classes.asp e para dar o 'stop' o removeClass().

Porém a animação não 'Starta' quando clico no botão, ela só está adicionando a classe, alguém sabe me dizer o que estou fazendo de errado no código? Grato

2 Respostas 2

1

Isso resolve seu problema:

              $("#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>

1

Exemplo aqui no JSFiddle.

No css modifiquei disto:

.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;
}

para isto:

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

pois o efeito estava "Startando" somente quando estivesse com o mouse em cima porque tem o hover, focus e active tirando isto já resolve seu problema!

Modifiquei também no Html para não acionar o efeito no carregamento da página e sim somente quando clicar no botão Do it!

De isto:

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

Para isto:

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

removi a class hvr-ripple-out.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .