[jQuery] jQuery effects speed cause hover to fire
I am trying to implement a div containing a form drop down on hover
and I have everything working except for when I try to add any sort of
animation or speed to the '.show' or '.hide' effect. When I try to add
speed or seemingly any other effect to the div, the select elements of
the search form fires the hover event. Does this make sense?
Here is the script:
$('.searchWidget').hover(
function() {
$(this).find(".topSearch").show();
},
function() {
$(this).find(".topSearch").hide();
});
Here is the html:
<div class="searchWidget">
<div class="topSearchTab">Advanced Search</div>
<div class="topSearch" style="display:none">
[LENGTHY FORM HERE with selects and inputs]
</div>
</div>
This works, but when I add speed to the '.show' or '.hide' [.show
(400)], or even a different effect like '.fadeIn' this causes the
select elements in the form to fire the hover and the div will just
show and hide over and over again without a mouse movement. I really
need to be able to add at least speed, any help is very much
appreciated. Thanks!