Jquery trigger error

Navigation
0

This div , by default when moving the mouse over it moves with CSS3 , now with jquery I try that every 1000ms , a throw was sent as if they were passing the mouse , because it moves constantly every 1 second (1000ms)

The problem is that it does not work for me and I do not understand what is wrong. 

<!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>
    
asked by Eduardo Sebastian 20.06.2017 в 00:58
source

2 answers

0

What you have to do is add an Active class, and remove it every interval 

<!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>
    
answered by 20.06.2017 в 06:32
0

You can not simulate the mouseover event because it is not a trusted event.

  

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.

The simplest solution is to create a class

answered by 20.06.2017 в 14:56
How to filter a foreach for a select Syntax failure in PHP call to a Select