DarkxPunk Posted December 9, 2012 Share Posted December 9, 2012 I am learning how to do animations without jQuery. So I got the basics down, but I want something a bit more versatile. Say for example you mouse over and a box begins to grow, and when you mouse out the box shrinks back to its original state. Now if the animation is short you don't need to worry. But if its long then you get the two animations fighting till the first one completes. So I need a solution, how can I get a script that when I mouse out it detects that it needs to stop the animation, then begin the shrinking process. Thanks for any help, idea. Link to comment Share on other sites More sharing options...
Don E Posted December 9, 2012 Share Posted December 9, 2012 (edited) Hey Dark, Based on your post, I put together some code real quick demonstrating what I think you're referring to. Just copy it to a text editor and save. Tested in Chrome, Firebox, and Safari. <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Box Grow</title><style type="text/css">#box { width: 100px; height: 100px; margin: 0 auto; background-color: lightblue;}</style><script type="text/javascript">var box;var speed = 5;var timer;window.onload = function(){ box = document.getElementById('box'); box.addEventListener('mouseover', setGrow, false); box.addEventListener('mouseout', setUngrow, false); } function setGrow(){ clearInterval(timer); if(box.offsetHeight == 100) { timer = setInterval(grow, 10); } else if(box.offsetHeight > 100) { timer = setInterval(grow, 10); } } function setUngrow(){ clearInterval(timer); if(box.offsetHeight > 100) { timer = setInterval(unGrow, 10); } } function grow(){ box.style.height = parseInt(box.offsetHeight + speed) + "px" ; box.style.width = parseInt(box.offsetWidth + speed) + "px";} function unGrow(){ box.style.height = parseInt(box.offsetHeight - speed) + "px"; box.style.width = parseInt(box.offsetWidth - speed) + "px"; if(box.offsetHeight <= 100 && box.offsetWidth <= 100 ) { clearInterval(timer); }}</script> </head><body> <div id="box"></div> </body></html> I'm sure there are other ways to demonstrate the above but hopefully it gives you an idea. Edited December 9, 2012 by Don E Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 9, 2012 Author Share Posted December 9, 2012 (edited) When it starts shrinking and I mouse over it, it refuses to regrow... I am still trying to wrap my head around how it works. Edited December 9, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
Don E Posted December 9, 2012 Share Posted December 9, 2012 I added a few lines of code. Try re-running the above again and see if that's what you were referring to. Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 9, 2012 Author Share Posted December 9, 2012 Solved thank you. Will keep playing and learning. Will update on any progress or any more questions. Thanks! Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 12, 2012 Author Share Posted December 12, 2012 Okay before if nessisary you just give me the solution, maybe try to explain.So I want to change it from onmouseover/out to be onclick. So I click once and it grows, I click again it shrinks.I attempted removing the mouse over event listeners and have it so onclick grow, and then change the onclick to ungrow so when I click again it shrinks, but for some reason it grows then shrinks right on click.So if you can explain how it works now and how I can maybe fix it myself. Thanks! Link to comment Share on other sites More sharing options...
Don E Posted December 12, 2012 Share Posted December 12, 2012 I can try to explain a way to what you're attempting to do with 'click' event and then you can try to attempt it so that you can get an idea. Here's a scenario/hint: A light switch(the click). A light switch when on(true), illuminates a room(box grows), when off(false), no light(box ungrows). Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 18, 2012 Author Share Posted December 18, 2012 I still can't rattle it. Any more clues... Link to comment Share on other sites More sharing options...
Don E Posted December 20, 2012 Share Posted December 20, 2012 Here's the light switch in action so to speak. Maybe you can get an idea and then apply the concept to the box to grow and ungrow with onclick. <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Switch</title><script type="text/javascript">var lightOn = true; function switchOnOff() { if(lightOn) { document.getElementById('lightBulb').style.backgroundColor = "yellow"; // box grows document.getElementById('lightBulb').innerHTML = "On"; lightOn = false; // set to false because the next click of the mouse is wanting to turn off the light } else { document.getElementById('lightBulb').style.backgroundColor = "white"; // box ungrows document.getElementById('lightBulb').innerHTML = "Off"; lightOn = true; // set to true because the next click of the mouse is wanting to turn on the light } } </script><style type="text/css"> #lightBulb { border: 1px solid black; width: 500px; height: 500px; margin: 0 auto; }</style> </head> <body> <div id="lightBulb" onClick="switchOnOff();">Click to turn off/on.</div></body></html> Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 20, 2012 Author Share Posted December 20, 2012 I swear I ended up with code exactly like this when I was playing with the code but it would not work. Yet this works... (I was doing the box not simply the switch) I will dissect and learn till I get it working. No more hints! :PThanks again, will post final result if I get it to work or not. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now