0

Este div ,por defecto al pasar el mouse por encima de él se mueve con CSS3, ahora con jquery intento que cada 1000ms, se envié un lanzar como si estuvieran pasando el mouse, con motivo de que se mueva constantemente cada 1 segundo(1000ms)

El problema es que no me funciona y no entiendo que está mal.

<!DOCTYPE html>
<html>
<head>
  <link href="http://ogar.pw/assets/css/anim.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
   setInterval(function() {
     $('#play-btn').trigger('mouseover');
     $('.hvr-wobble-horizontal').trigger('mouseover');
      }, 1000);

});

</script>
</head>
<body>

<div style="width: 300px; height: 300px; background-color: green; position: absolute;" class="hvr-wobble-horizontal" id="play-btn"></div>



</body>
</html>

2 respuestas 2

0

Lo que tienes que hacer es adicionar una clase Active, y removerla cada intervalo

<!DOCTYPE html>
<html>
<head>
<link href="http://ogar.pw/assets/css/anim.css" rel="stylesheet">

<style type="text/css">
	.active {
		animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		perspective: 1000px;
	}

	@keyframes shake {
		10%, 90% {
			transform: translate3d(-1px, 0, 0);
		}
		
		20%, 80% {
			transform: translate3d(2px, 0, 0);
		}

		30%, 50%, 70% {
			transform: translate3d(-4px, 0, 0);
		}

		40%, 60% {
			transform: translate3d(4px, 0, 0);
		}
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		setInterval(function() {
			
			
			setTimeout(function(){
				$('#play-btn').removeClass('active');
			}, 1000)

			$('#play-btn').addClass('active');
			
		}, 2000);


	});

</script>
</head>
<body>

<div style="width: 300px; height: 300px; background-color: green; position: absolute;" class="hvr-wobble-horizontal" id="play-btn"></div>



</body>
</html>

0

No puedes simular el evento mouseover debido a que no es un evento de confianza.

Most untrusted events will not trigger default actions, with the exception of the click event. This event always triggers the default action, even if the isTrusted attribute is false (this behavior is retained for backward-compatibility). All other untrusted events behave as if the preventDefault() method had been called on that event.

La solución más sencilla es crear una clase que dispare la animación/transición y añadirla/quitarla en cada iteración.

Ejemplo

const animate = () => {
  setTimeout(() => $('#box').addClass('active'), 1000);
  setTimeout(() => {
    $('#box').removeClass('active');
    animate();
  }, 2000);
};

animate();
#box {
  background: linear-gradient(to bottom, turquoise, gold);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.15);
  height: 150px;
  margin: 25px auto;
  transition: all 1s ease;
  width: 150px;
}

#box.active {
  transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.