Trigger css hover in javascript

Question

So I'm working a coin flip minigame and I need an animation. My code so far is:
HTML:

<div class="flip-container"> <div class="flipper"> <div class="front"> <img src="http://i.imgur.com/YS84SGq.png" alt="" /> </div> <div class="back"> <img src="http://i.imgur.com/lDR0Xj8.png" alt="" /> </div> </div> </div> 

CSS:

.flip-container { position: absolute; perspective: 1000; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 25%; } .flip-container, .flip-container .front, .flip-container .back { -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; width: 150px; height: 150px; overflow: hidden; } .front img, .back img { width: 150px; height: 150px; } .flip-container .flipper { transition: 3s; transform-style: preserve-3d; position: relative; } .flip-container .flipper .front, .flip-container .flipper .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .flip-container .flipper .front { z-index: 2; transform: rotateY(0deg); } .flip-container .flipper .back { transform: rotateY(180deg); } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(720deg); } 

A working demo: https://jsfiddle.net/k0pjcftp/
As you can see, animation works fine on hover. But I need to trigger it somehow through javascript, and I have no idea how. I tried adding a css class with transform(...) but animation wasn't working. Any ideas?

Answer 1

You can use jQuery's hover method and toggle the hover class on your container.

$('.flip-container').hover(function() { $(this).toggleClass('hover'); });

.flip-container { position: absolute; perspective: 1000; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 25%; } .flip-container, .flip-container .front, .flip-container .back { -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; width: 150px; height: 150px; overflow: hidden; } .front img, .back img { width: 150px; height: 150px; } .flip-container .flipper { transition: 3s; transform-style: preserve-3d; position: relative; } .flip-container .flipper .front, .flip-container .flipper .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .flip-container .flipper .front { z-index: 2; transform: rotateY(0deg); } .flip-container .flipper .back { transform: rotateY(180deg); } /*.flip-container:hover .flipper,*/ .flip-container.hover .flipper { transform: rotateY(720deg); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="http://i.imgur.com/YS84SGq.png" alt="" /> </div> <div class="back"> <img src="http://i.imgur.com/lDR0Xj8.png" alt="" /> </div> </div> </div>