JS Animation

Markstagram

Hey there folks,

My name is Mark and I'm an aspiring web developer (who isn't), and I have already run into my first headache:

I am trying to make a div block expand to a certain width when the mouse rolls over the block and then collapse when the mouse rolls off the image. Easy enough right? Well I've only been doing javascript for a week or so and for whatever reason I can't get it. Prepare for newbie code:

Lesshardtoofind

If you call the setInterval once it will continue to call the function on the interval.
Your code calls it over and over. This isn't needed you only need to clear the interval when you are done needing it to repeat.

I copied/adjusted everything so you can see the specific code I am working with. The point is to make it work like a flash nav (where the box expands to the right when you are hovering over it; then collapses back when you are not)

Thanks for the help regardless; if anything, this experiment is teaching me way more than I had expected it would!

Lesshardtoofind

I adjusted your code to a working example... I simplified things alot. If you have any questions or comments on the new code let me know. I am very new at JavaScript too. I just started last week, but I'm pretty fluent in C++.

Lesshardtoofind

Lol dunno why I got hooked on this, but I realized the coding would get really redundant if you continued on that path when needing to add multiple elements. So I adjusted the code again if you notice I added two parameters to the setinterval functions.

One parameter is the ID of the item that is doing the mouseover and the second is an index in the corresponding arrays that represent length and intervals. So you can add more things to the menu just by following the simple formula

Markstagram

Wow! I love this place already...I'm glad you got as sucked into this code as I did haha (and that you're a bit more experienced) - your fix worked 100% perfectly; It looks beautiful! I won't lie I don't really understand the concept of arrays yet - my mind is still processing basic stuff - but I think this example might clear a lot of things up for me. Great work! Hopefully one day I can return the favor...even though by then I'm sure you'll be making automatic planes and what not

Thanks for your help - I appreciate the effort you put into this!

Lesshardtoofind

Lol I doubt that. Glad it works for you. Hope you don't mind since I spent some time on it and I think it looks nice I am borrowing the concept for one of my pages! Seriously if you have questions about how it works just let me know you can toss me a PM too. I'm a pretty big nerd so I'm coding something every other day. (whether its html, css, javascipt, xhtml, C, or C++) As for the arrays learn them! They are VERY useful.. the next thing I'm trying to learn is how to give a function its own methods so that I can have alot of scripts working together w/o stepping on each others toes.