jquery - 鼠标按住时如何显示元素

Question

我有一个ul和很多li。我希望当鼠标按住li3 秒时显示一个 div，当我将鼠标从该 div 隐藏的元素上移开时。我在谷歌搜索了很多，我知道我应该使用fadeIn，fadeOut但我不知道如何使用这些。我还想在单击任何时li向我显示一个警报。请指导我，因为我很困惑。

多谢

这是我的代码： HTML：

<ul id="friend-list">
        <li id="1"></li>
        <li id="2"></li>
        <li id="3"></li>
        <li id="4"></li>
        <li id="5"></li>
        <li id="6"></li>
</ul>

jQuery：

$(document).on('mouseover','#friend-list li',function(){
    $('#center-side').fadeIn('slow');
});
$(document).on('mouseout','#friend-list li',function(){
    $('#center-side').stop().fadeOut('slow');
});

$(document).on('click','#friend-list li',function(){
    alert('aaaaaaaaa');
}); 

Answer 1

您可以使用setTimeout()

jQuery

var tOut;

$('ul').on('mouseover', 'li', function () {
    tOut = setTimeout(function () {
        $('div').show();
    }, 3000);
}).on('mouseout', 'li', function () {
    clearTimeout(tOut);
    $('div').hide();
}).on('click','li',function(){
    alert("aaaaaaaaa");
});

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>1</li>
    <li>2</li>
</ul>
<div>show and hide me</div>

演示

Answer 2

你可以使用这个：

                        var timer = null;
                        $('#friend-list li').hover(function() {
                            var $el = $('#center-side');
                            clearTimeout(timer);
                            timer = setTimeout(function() {
                                $el.css('display','block');
                            }, 1500);
                        }, function() {
                            clearTimeout(timer);
                            timer = setTimeout(function() {
                                $('#center-side').css('display','none');
                            }, 10);

                        });

Answer 3

$("li.foo").mouseover(function()
{
    $("div.foo").show(100);
}.mouseout(function()
{
    $("div.foo").hide(100);
}.click(function()
{
    alert("Clicked");
});

Answer 4

jQuery -> 鼠标按下

$(".element").mousedown(function(){
  alert("Success");
});

当用户单击元素时，这将运行您的代码。Mouseup -> 当保持点击向下时。

http://api.jquery.com/mousedown/

$(".element").mouseenter(function(){
  alert("Enter");
}).mouseleave(function(){
  alert("Leave");
});

仅当光标在对象周围飞行而不是单击时，Whis 才会运行您的代码。

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/