2010-04-11 5 views
1

Je rencontre un comportement étrange en utilisant jQuery pour afficher/masquer un menu.afficher/masquer le problème de menu dans jQuery

J'ai un div en position absolue qui contient un div "activateur" (relativement positionné) dont je veux révéler un menu sur moseover. Menu div est contenu par l'activateur div et est également relativement positionné. Je travaillais sur la supposition que puisqu'il serait contenu par l'activateur que le décrochage ne serait pas déclenché quand la souris se déplace dans le menu révélé. Lorsque vous passez sur le menu révélé, la fonction show/hide commence à pulser et se déclenche une seconde après que la souris a effacé la zone.

CSS ressemble à ce

#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> 

Pour voir problème en rouleau d'action sur l'emplacement actuel du temps (Thunder Horse) en en bas à gauche ici: http://www.karlsenner.dreamhosters.com/index.php

Un conseil est le plus apprécié!

Répondre

2

Pouvez-vous essayer:

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

Merci! Cela a résolu! – jerrygarciuh

+0

Heureux que je puisse être utile :) – mattbasta

0

Je n'ai jamais eu la meilleure chance régler l'exposition/cacher l'heure. Le code fonctionne très bien fait ceci:

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

Une autre chose que je suggère est de ne pas créer un lien vers les scripts directement à partir de leurs sites d'hébergement. Cela rend les webmestres fâchés contre vous pour avoir volé de la bande passante. Donc, hébergez le plugin jquery cycle sur votre site, mais utilisez la copie de google (puisqu'ils le permettent) de jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
Questions connexes