JQuery help - slideToggle, stop and hover

Discussion in 'Web Design and Development' started by mwilloam, Jan 26, 2011.

  1. mwilloam, Jan 26, 2011
    Last edited by a moderator: Jan 26, 2011

    mwilloam macrumors newbie

    Joined:
    Apr 3, 2010
    #1
    I am trying to create simple drop down menus so when you hover over an element it will dropdown a hidden list in an animated manner. I'm trying to keep this as simple as possible and JQuery slideToggle seems to be it but there is an issue. I can get the effect to work correctly but if I move my mouse fast on and off the hover the menu will bounce until the amount of hovers are completed. I've tried using ".stop" so as to stop the animation when the hover ends but for some reason when I hover back on again the hidden element only drops down to the point where I ending the last hover. Here is a link to an example:

    http://custommediastudios.com/jdrop

    And here is the code:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>

    <
    style>

    #blue{
    background-colorblue;
    width:200px;
    padding20px;
    }

    p{
    display:block;
    background-color:red;
    colorwhite;
    }

    </
    style>

    <
    script src="http://code.jquery.com/jquery-1.4.4.js"></script>

    <script>
    $(document).ready(function() {
        $("ul").hide();
        $(".drop").hover(function () {
        $("ul").stop().slideToggle("slow");
        });
        });
    </script>

    </head>

    <body>
        <div id="blue">
            <p class="drop">Menu</p>
            <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            </ul>
        </div>
    </body>
    </html>
     
  2. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #2
    The reason is because you have a 1em margin on your ul. So technically, it "bounces" up when the mouse is at this location. If you need there to be spacing between the main menu and the first nav item, i'd suggest top padding on the ul or first li item.
     

Share This Page