jquery - 如何通过悬停和随机延迟显示/隐藏项目

Question

我有一个 item1 通过鼠标悬停显示/隐藏 item2：

$(function() {
    $("#item1").hover(function() {
        $("#item2").show();
    }, function() {
        $("#item2").hide();
    });
});

我想让 item2 也通过随机时间延迟在 item1 上悬停/悬停来显示和隐藏。我怎样才能做到这一点？

Answer 1

jQuery代码：

$(document).ready(function() {
    setInterval( function() {
        $("#item2").toggle('slow');
    }, 2000);
    $(function() {
        $("#item1").hover(function() {
            $("#item2").show();
        }, function() {
            $("#item2").hide();
        });
    });
});

在行动-> jsFiddle - epeS4

Answer 2

根据您的需要增加和乘以随机数：

$(function() {

    var blocked = false;

    function divToggle() {
        if (!blocked) {
            $("#item2").toggle();
        }
        setTimeout(divToggle, Math.random() * 2000);
    };

    divToggle();

    $("#item1").hover(function() {
        blocked = true;
        $("#item2").show();
    }, function() {
        blocked = false;
        $("#item2").hide();
    });

});​

演示