Question

I am attempting to using jQuery make the height of a particular div expand whenever a mouse is hovering over it so I can make a menu out of it. But for some reason it always cycles up and down twice as my mouse is hover over it instead of just the one time I want it to. Here’s a copy of my code that contains the error.

<div id="Container">
        <div id="Headeritem">
            <div id="NavBaritem">
              <div id="Nav3item">
                <div id="NavExpand3item"><a href="#" class="NavTextitem">Ministries</a></div>
              </div>
            </div>
          </div>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
        <script type="text/javascript">
          <!--Script for NavBar Control
          $(document).ready(function(e) {
            <!--Script for AboutNE DropDown//-->
            $('#NavExpand3item').hover(
                function () {
                    $('#NavExpand3item').animate({
                        'height':'200px'
                    }, 300);
                },
                function () {
                    $('#NavExpand3item').animate({
                        'height':'0px'
                    }, 300);
                }
            );
          });

          //-->
         </script>
  </div>

I really just want to know how I can prevent my menu from cycling twice, here is a link to a site. I hope someone will be able to help me.

Thank You,

Mo

Answer 1

@Francisc is pretty much correct.

http://jsfiddle.net/4cVSq/

What’s happening is(i think), when you mousover the text it expands the div and when your mouse encounters the div as it expands, it counts that as another hover.

You have two options. the one a linked before. or this one.

http://jsfiddle.net/4cVSq/2/

You can give the outer div a height, or you can put the mouseover for the inner div, while still animating the outer div. I think the first one is what you want, since this looks like you are planning on making it into a menu.