jquery - 悬停时下拉延迟超时jquery

Question

http://jsfiddle.net/natvk/

我已经构建了这个下拉菜单，将鼠标悬停在第三个框上并等待下拉菜单显示，然后将鼠标悬停在汽车上并等待第二个下拉菜单显示。现在的问题是，如果我将鼠标悬停在菜单之外，尽管有延迟并且我有时间返回菜单，但它仍然会再次调用切换。菜单不会保持打开状态。如果用户将鼠标悬停在菜单上并再次返回，我如何保持它打开？

除了 js fiddle 上的代码之外，这里的用户还建议了此代码，但是菜单一开始就没有调用，所以什么也看不到，建议的代码在这里:

var menu_animation_timeout = null;

$('.ddown').hover(function(){
    clearTimeout(menu_animation_timeout);
    menu_animation_timeout = setTimeout(function(){
    $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
    }, 500) 

    }, function() {
    clearTimeout(menu_animation_timeout);   
    menu_animation_timeout = setTimeout(function(){
    $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
    }, 1000)
});

谢谢

伊恩

Answer 1

您需要使用stop(true)在动画停止时立即将其移动到最后一帧。试试这个:

$(document).ready(function () {
    //Show then hide ddown menu on hover
    $('.ddown').hover(function () {
        $(this).children('ul').stop(true).delay(500).slideDown(500);
    }, function () {
        $(this).children('ul').stop(true).delay(1000).slideUp(500);
    });
});

Updated fiddle