Question

我编写了一个代码，如果有人徘徊其他div，则会出现div，我添加了5秒延迟，因此显示的div保持不变但问题是我希望它保持到下一个链接悬停。意味着如果第二个链接徘徊，我需要第一个div消失。

这是我现有代码的JS Fiddle链接： http://jsfiddle.net/np87e/880/

$( document ).ready(function() {
$("#theLink3").hover(
    function () {
        $("#theDiv3").slideDown();
    },
    function () {
        $("#theDiv3").delay(5000).slideUp();
    }
);
$("#theLink4").hover(
    function () {
        $("#theDiv4").slideDown();
    },
    function () {
        $("#theDiv4").delay(5000).slideUp();
    }
);
});

Answer 1

您需要在下一个元素mouseenter callback

中调用div的slideUp（）

$("#theLink3").hover(function () {
    $("#theDiv4").stop(true, true).slideUp();
    $("#theDiv3").slideDown();
}, function () {
    $("#theDiv3").delay(5000).slideUp();
});

演示：Fiddle

注意：我并不喜欢像你一样编写个人悬停处理程序。所以

<a href="" id="theLink3" class="trigger">hover here</a>
<div id="theDiv3" class="target">this is the div</div>
<hr />

<a href="" id="theLink4" class="trigger">hover here</a>
<div id="theDiv4" class="target">this is the div</div>
<hr />

然后

jQuery(function ($) {
    var $targets = $('.target');
    $(".trigger").hover(function () {
        var $target = $(this).next('.target').stop(true, true).slideDown();
        $targets.not($target).stop(true, true).slideUp();
    }, function () {
        $(this).next('.target').stop(true, true).delay(5000).slideUp();
    });
});

演示：Fiddle

Jquery延迟覆盖下一个链接或div悬停

1 个答案: