Tengo un problema al agregar solo una clase al pasar el mouse sin agregar las otras. Aquí está el problema:

Html:

<ul id="ulnav">
    <li><a><img src="images/nav/play.svg" class="animated" id="playnav"/></a></li>
    <li><a><img src="images/nav/home.svg" class="animated" id="homenav"/></a></li>
    <li><a><img src="images/nav/mountains.svg" class="animated" id="mountainsnav"/></a></li>
    <li><a><img src="images/nav/contact.svg" class="animated" id="contactnav"/></a></li>
</ul>

Tengo una funcion:

var randomAnim = function(){
var result = Math.floor((Math.random()*9) +1);
switch(result) {
    case 1:
        result = "jello";
        break;
    case 2:
        result = "wobble";
        break;
    case 3:
        result = "tada";
        break;
    case 4:
        result = "swing";
        break;
    case 5:
        result = "shake";
        break;
    case 6:
        result = "rubberBand";
        break;
    case 7:
        result = "pulse";
        break;
    case 8:
        result = "bounce";
        break;
    case 9:
        result = "flip";
        break;
}
return result; };

Y lo estoy usando aquí:

   $('#playnav').hover(function() {
     var roll = randomAnim();
     $('#playnav').addClass(roll);
     $(this).on('webkitAnimationEnd mozAnimationEnd animationEnd', function() {
        setTimeout(function(){
            $('#playnav').removeClass(roll);
        }, 2000);
     });
 });

Básicamente está agregando animación aleatoria a #playnav. El problema es que si paso el mouse sobre el elemento playnav agregará varias clases, por ejemplo, gelatina, bamboleo y pulso al mismo tiempo, lo que da como resultado una animación interrumpida.

Entonces, mi pregunta es, ¿cómo puedo agregar solo una clase al pasar el mouse por encima?

0
RJq 12 may. 2016 a las 00:46

3 respuestas

La mejor respuesta

No creo que quiera usar .hover(). Recomiendo .mouseenter() Intercambio de una sola palabra para la solución.

$('#playnav').mouseenter(function() {...

Esto solo llamará a su función de aleatorización una vez, hasta que el cursor se vaya y luego vuelva a ingresar al elemento. De hecho, también perdería el temporizador.

$('#playnav').mouseenter(function() {
     var roll = randomAnim();
     $('#playnav').addClass(roll);
     $('#playnav').mouseleave(function() {
            $('#playnav').removeClass(roll);
     }); 
});

Una alternativa sería:

$('#playnav').mouseenter(function() {
         var roll = randomAnim();
         $('#playnav').addClass(roll);
    });
$('#playnav').mouseleave(function() {
         $('#playnav').attr('class', 'animated');
    }); 

Y aquí está un jsfiddle actualizado con biblioteca CSS vinculada. Buen efecto. El enlace de la biblioteca = https://rawgit.com/daneden/animate.css/master /animate.css

Y si desea ir un paso más allá y animar cada elemento de forma independiente, puede hacerlo.

            $('.animated').mouseenter(function() {
                var roll = randomAnim();
                $(this).addClass(roll);
                $(this).mouseleave(function() {
                    $(this).removeClass(roll);
                });
            });
0
zipzit 11 may. 2016 a las 22:53

Gracias a todos por las respuestas. El código que he usado:

     $('#playnav').mouseenter(function() {
     var roll = randomAnim();
     $(this).removeClass("jello wobble tada swing shake rubberBand pulse bounce flip").addClass(roll);
     $(this).on('webkitAnimationEnd mozAnimationEnd animationEnd', function() {
        setTimeout(function(){
            $('#playnav').removeClass(roll);
        }, 1500);
     });
 });

Se ve muy bien a menos que se mueva sobre el elemento como loco (hace que la animación se detenga incluso antes de que termine).

Las animaciones son de Animate.css ( https://daneden.github.io/animate.css/);

La clase que está causando la animación:

.animated { 
    animation-duration: 1s;
    animation-fill-mode: both;
}
0
RJq 11 may. 2016 a las 22:57

Según el síntoma, el evento de desplazamiento se dispara un par de veces de alguna manera. algunos problemas que noté del código.

- Como se menciona en user6188402, esos códigos de conmutación pueden simplificarse.

- no tiene ningún sentido poner 'webkitAnimationEnd mozAnimationEnd animationEnd' en el evento de desplazamiento;

- en el caso, usar $ (esto) es suficiente, no es necesario volver a usar el selector;

0
user3491401 11 may. 2016 a las 22:04