.mouseout( function() {
setTimeout('$
(this).children("ul").css("display","none");', 500);
Another option that works better instead of using getTimeout and such
in jQuery is to use animate(callback) on an already visible
element...
ex:
.mouseout(function(){
$("#main-menu').animate({opacity: 1.0}, 850,function(){
$(this).children("ul").hide();\
});
});
On Sep 10, 1:48 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> For this sort of thing, I strongly recommend the hoverIntent plugin:
>
> http://cherne.net/brian/resources/jquery.hoverIntent.html
>
> --Karl
>
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Sep 10, 2008, at 10:59 AM, RichUncleSkeleton wrote:
>
>
>
> > I've made a drop-down menu with jQuery which works great, except that
> > on mouseout the menu disappears instantly. I'd like it if there was a
> > delay before the menu disappeared, in case the user moves the mouse
> > out slightly by accident (or when moving to other parts of the menu).
>
> > Here is my current code:
>
> > jQuery.noConflict();
> > jQuery(document).ready( function($) {
> > $("#main-menu ul.menu li")
> > .mouseover( function() {
> > $(this).children("ul").css("display","block");
> > })
> > .mouseout( function() {
> > $(this).children("ul").css("display","none");
> > });
> > });
>
> > I was originally using the fadeIn/fadeOut effect but it proved
> > problematic. So I'd just like to call a timeout in the mouseout
> > function, followed by the code to hide the menu.
