jQuery show/hide menu problem

Question

Hi folks,

I am encountering an odd behavior using jQuery to show/hide a menu.

I have an absolutely positioned div which contains an "activator " div (relatively positioned) which I want to reveal a menu on moseover. Menu div is contained by the activator div and is also relatively positioned. I was working on assumption that since it would be contained by the activator that rolloff would not be triggered when the mouse travels over into the revealed menu. When you roll onto the revealed menu however show/hide starts pulsing and does so a second or so even after the mouse clears the area.

CSS looks like this

#myAbsolutePos {
 position:absolute;
 height:335px;
 width:213px;
 top:508px;
 left:0;
 z-index:2;
}

#activator {
 position:relative;
 height:35px;
 margin-top:95px;
 text-align:center;
 width:inherit;
 cursor:pointer;
}

#menu {
 position:relative;
 height:255px;
 width:243px;
 top:-45px;
 left:190px;
 padding:20px 25px 20px 25px;
}

#menuContents {
 width:190px;
}

jQuery funcs:

  $('#activator').mouseover(function () {
    $('#menu').show('slow');     
  });

  $('#activator').mouseout(function () {
    $('#menu').hide('slow'); 
  });

HTML:

<div id="myAbsolutePos">
<div id="activator">
  // content

  <div id="menu" style="display:none">
    <div id="menuContents">
    // content
    </div>
  </div>
</div>
</div>

To see problem in action roll over the current weather location (Thunder Horse) in the lower left here: http://www.karlsenner.dreamhosters.com/index.php

Any advice is most appreciated!

JG

Answer 1

Can you try:

$('#activator').hover(function () {
    $('#menu').show('slow');     
}, function () {
    $('#menu').hide('slow'); 
});

Answer 2

I've never had the best luck adjusting the show/hide time. The code works just fine doing this:

$('#weatherSelected').mouseover(function(){
  $('#weatherMenu').show();
}).mouseout(function(){
  $('#weatherMenu').hide();
});

One other thing I would suggest is to not link to the scripts directly from their hosting sites. It makes web masters mad at you for stealing bandwidth. So, host the jquery cycle plugin on your site, but use google's copy (since they allow it) of jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;