jquery - Triggering a basic CSS animation with Javascript -


I am currently trying to add a Konomi code which is a spin on one of my (very simple) pages Will spin up. / P>

Here's my code:

  & lt; Html & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Script type = "text / javascript" src = "jquery.js" & gt; & Lt; / Script & gt; & Lt; Html & gt; & Lt; Script & gt; Var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65], n = 0; $ (Document) .keydown (function (e) {if (e.keycode === k [n ++]) {if (n === k.length) {alert ('Konami working'); return! 1 }} Else k = 0}); & Lt; / Script & gt; & Lt; Style & gt; # Div1 {Position: Absolute; Top: 0%; Left: 0%; Width: 100%; Height: 100%; Webkit-Animation: Spin 4S Linear Infinite; -MOZ-Animation: Spin 4S Linear Infinite; Animation: Spin 4S Linear Infinite; } @ -mose-keyframe spin {100% {-moz-transform: rotate (360 degrees); }} @ -webkit-keyframe spin {100% {-webkit-transform: rotate (360 degrees); }} @ Kframe spin {100% {-webkit-transform: rotate (360deg); As a result rotate (360deg); }} & Lt; / Style & gt; & Lt; div id = "div1" & gt; Iframe frameborder = "0" width = "100%" height = "100%" align = "middle" src = "// www.youtube.com/embed/_RJHLB3cBXU? Autoplay = 1 & loop = 1 & amp; Control = 0 & amp; rel = 0 & amp; ShowInfo = 0 & amp; iv_load_policy = 3 & Playlist = _RJHLB3cBXU "& gt; & Lt; / Iframe & gt; & Lt; / Div & gt; & Lt; / Html & gt;   

As you can see, this is about triggering the specified animation in the dirty CSS soup (which works at all) when the correct code is entered. I'm a bit disappointed about this, is anyone's idea?

I think whatever I want is going here, just try to add that class , In which the event occurs when the animation occurs. I am 100% not sure that it will work out because I am not very familiar with the keyframe, but the concept should be kept right and you will get permission to get the answer.

  $ (document) .keydown (function (e) {if (e.keycode === k [n ++]) {if (n === k.length) {alert ('Konomy work'); $ ('# div1') addClass ('spinIt'); // & lt; - add this return! 1}} else k = 0});   

CSS:

  & lt; Style & gt; # Div1 {Position: Absolute; Top: 0%; Left: 0%; Width: 100%; Height: 100%; } // Add this class with animation css and remove it from above div1. . Spin {-bbkit-animation: spin 4s linear endless; -MOZ-Animation: Spin 4S Linear Infinite; Animation: Spin 4S Linear Infinite; } & Lt; / Style & gt;    

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -