Example

Question

我如何等待点击事件？例如。我希望我的<div>在淡入后等待3秒钟，如果在3秒内没有点击<div>则会淡出。{/ p>

我尝试在fadeOut中给出时间2秒但鼠标点击不起作用它只是fadeOut。

我的.js文件代码：

$(document).ready(function () {
$(".arrow").hide()

$(".container").mouseenter(function () {
    $(".arrow").fadeIn()
});

$(".container").mouseleave(function () {
    $(".arrow").fadeOut(2000)
});

$(".arrow").click(function () {
    $(".container").hide()
});

Answer 1

$(document).ready(function () {
    var clicked = 0;

    $(".container").mouseenter(function () {
        $(".arrow").fadeIn();
        setTimeout(function() {
            if(clicked == 0) {
                $(".arrow").fadeOut(2000);
            }
        },3000);
    });

    $(".container").mouseleave(function () {
        $(".arrow").fadeOut(2000);
    });

    $(".container").click(function () {
        clicked = 1;
    });

Answer 2

我不确定你要完成什么，但你的onClick处理程序无法正常工作，因为语法错误。

试试这个：

$(".arrow").on('click', function () {
    $(".container").hide()
});

你似乎也错过了ready - 函数的结束括号。

应该是这样的：

$(document).ready(function () {

 // Your code here

}); // Don't forget this line

Answer 3

使用布尔值检查是否在时间限制结束时点击了箭头。

Example

$(document).ready(function () {
    var clicked = false;

    $(".arrow").click(function () {
        clicked = true;
    });

    $(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
        $(".arrow").fadeIn();
        setTimeout(function () {
            if (clicked === false) {
                $(".arrow").fadeOut(2000);
            }
        }, 3000);
    }, function () {
        $(".arrow").fadeOut(2000);
        clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
    }); // .hover
}); // .ready

Jquery：完成＆＃39;淡入＆＃39;效果，等待点击＆＃39;事件

3 个答案:

Example