Home/ Questions/Q 9185705
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:20:31+00:00

I couldn’t seem to find an answer to this question so I thought I

  • 0

I couldn’t seem to find an answer to this question so I thought I would ask. I am writing my first website, and I am using a little bit of Javascript to slide each individual navigation element up when the mouse hovers over it. Then on mouseout it slides back down.

It is working fine except when the mouse goes from an “up” element to a “down” one before the “up” has time to slide back down, it gets messed up and stays up while the “down” elements thinks it should slide down. I think that the new mouseover event is getting mixed up with the previous one, but I’m not sure how to fix it.

I hope that explains my problem, here is the code I am working with (The CSS is pretty straight forward position is relative for each navigation tab so I didn’t show it):

Javascript:

var cartridges, obj, lastObj;
var velocity = 2;

function setUp() {
    if (!document.getElementById) return;
        cartridges = document.getElementsByClassName('navigation');
    for (var i = 0; i < cartridges.length; i++) {
        cartridges[i].onmouseover = slideUp;
        cartridges[i].onmouseout = slideDown;
   }
}

function slideUp(e) {
    if (!e) var e = window.event;
    obj = (e.target) ? e.target: e.srcElement;
    var up = obj.style.top;
    up = up.substring(0, up.length - 2);
    parseInt(up);

    function frame() { 
        up -= velocity; // update parameters     
        obj.style.top = up + "px"; // show frame
        if (up <= -100)  // check finish condition (negative because that pushes it up, otherwise it would go down
            clearInterval(id);
    }
    var id = setInterval(frame, 10); // draw every 10ms 
}

function slideDown() {
    var up = obj.style.top;
    up = up.substring(0, up.length - 2);
    parseInt(up);

    function frame() { 
        up++;  // update parameters 
        obj.style.top = up + "px";
        if (up >= 0)  // check finish condition (negative because that pushes it up, otherwise it would go down
            clearInterval(id);
    }
    var id = setInterval(frame, 10); // draw every 10ms 
}

window.onload = setUp;

HTML:

<div id="navigation">
            <ul>
                <li><a  class="navigation" href="index.html" ><img id="home" alt="Home" src="../images/cartridge_grey_index.png" /></a></li>
                <li><a  class="navigation" href="aboutme.html"><img id="aboutme" alt="About Me" src="../images/cartridge_grey_aboutme.png" /></a></li>
                <li><a  class="navigation" href="resume.html"><img id="resume" alt="resume" src="../images/cartridge_grey_resume.png" /></a></li>
                <li><a  class="navigation" href="projects.html"><img id="projects" alt="projects" src="../images/cartridge_grey_projects.png" /></a></li>
                <li><a  class="navigation" href="blog.html"><img id="blog" alt="blog" src="../images/cartridge_grey_blog.png" /></a></li>
                <li><a  class="navigation" href="contact.html"><img id="contact" alt="contact" src="../images/cartridge_grey_contact.png" /></a></li>
            </ul>
        </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are new to the web, and especially new to the world of Javascript, I would highly recommend using a library such as jQuery or MooTools to accomplish a sliding menu. There are many plugins already available, or if you want to go through the learning process, you can wire it up yourself pretty easily.

    jQuery provides convenient methods such as .mouseover() and .slideUp(), which makes this task nearly trivial, or you can choose from a listing of other effects such as fade and show/hide. As an added bonus, you’ll get compatibility across all browsers as well.

    For more info, check out: http://api.jquery.com

    • 0