jquery - jquery ui 菜单、队列或传播？

Question

我正在创建一个 jquery 菜单来操作 DOM 上的元素。我的菜单按照我需要的方式运行，但是，如果我快速多次悬停内容区域，我的代码没有时间完成它的任务，我最终会在我的周围出现多个包装（或多个 div）内容区。我使用包装，所以我可以将我的菜单放在里面。

我试过 e.stopPropagation(); 但这不起作用，也许与队列有关？任何人都可以给我一些指示吗？

我创建了一个演示来显示菜单：http: //jsfiddle.net/michelm/rnB2b/1/

$('.content').hover(function() {

                $(this).prepend('<div class="menu">Menu</div>').wrap('<div class="mywrap"></div>');
                $(".menu", this).delay(200).fadeIn("fast");

            }, function() {



                $(".menu", this).stop(true).delay(1000).fadeOut(300, function() {
                    $(this).remove();
                     $(this).parent().unwrap();

                });

                $(this).stop(true).delay(1500).fadeIn(300, function() {
                    $(this).unwrap();

                });


            });

Answer 1

您可以尝试检查您的元素是否已被包装，如果是，则不要再次添加包装器。

代码：

    $('.content').hover(function () {

        if (!$(this).parent().hasClass("mywrap")) {
            $(this).prepend('<div class="menu">Menu</div>').wrap('<div class="mywrap"></div>');
        }
        $(".menu", this).stop().delay(200).fadeIn("fast");

    }, function () {



        $(".menu", this).stop(true).delay(1000).fadeOut(300, function () {
            $(this).remove();
            $(this).parent().unwrap();

        });

        $(this).stop(true).delay(1500).fadeIn(300, function () {
            $(this).unwrap();

        });


    });

演示：http: //jsfiddle.net/IrvinDominin/YyXd5/

或者，您可以使用 css hover 像：

.content:hover{
    border: 2px solid #ff0000;
}

演示：http: //jsfiddle.net/IrvinDominin/YyXd5/1/