Question

下面是一个jQuery语句，它在其click事件上隐藏了一个div元素。无论是否在5秒后没有点击，我都希望元素淡出。有没有一种简单的方法可以在同一个表达式中调用fadeOut函数，或者click事件没有干扰动画？

$(".fadeOutbox").click(function(){
    $(this).fadeOut('slow');
});

Answer 1

大多数jQuery组件都是可链接的，你的函数会返回对初始对象的引用。

您可以通过以下方式实现您想要的目标：

$(".fadeOutbox").click(function () {
    $(this).stop().fadeOut('slow');
}).delay(5000).fadeOut('slow');

基本上读作onclick，淡出，否则在5秒后淡出。

Answer 2

我认为这是在另一个显示框开头的函数中。此解决方案将在5秒后隐藏框，或在点击后立即隐藏。

var $box = $('.fadeOutbox');
var fadeOut = function() {
    clearTimeout(timeout);
    $box.fadeOut('slow');
};
var timeout = setTimeout(fadeOut, 5000);
$box.click(fadeOut);

Answer 3

编辑以澄清：

var clear = setTimeout(function(){ $(".fadeOutbox").fadeOut('slow'); }, 5000);

$(".fadeOutbox").on('click', function(){
  clearTimeout(clear);
});

演示：http://jsfiddle.net/mGbHq/

Answer 4

在点击处理程序中使用超时不：

setTimeout(function () {
   $(".fadeOutbox").fadeOut('slow');
}, 5000);

您的jQuery代码变为：

// set a timeout for 5 seconds
setTimeout(function () {
    $(".fadeOutbox").fadeOut('slow');
}, 5000);

// attach click handler
$(".fadeOutbox").on("click", function () {
    $(this).fadeOut('slow');
});

JSFIDDLE

Answer 5

保存用户点击或未点击的事实，并在计时器

中对其进行测试

var isClicked = false;

setTimeout(function () {
   if(!isClicked)
      $(".fadeOutbox").fadeOut('slow');
}, 5000);

$(".fadeOutbox").click(function () {
 isClicked = true;
});

Answer 6

试试这个：

var wasClicked = false;
$(".fadeOutbox").click(function () { wasClicked = true; });

setTimeout(function () {
   if(wasClicked = false)
       $(".fadeOutbox").fadeOut('slow');
}, 5000);

Answer 7

尝试为超时保留一个变量，并在每次用户点击时清除它。

Working example

// Timeout variable
var t;

$('.fadeOutBox').click(function()
{
    $box = $(this);
    $box.fadeIn("fast");

    // Reset the timeout
    clearTimeout(t);
    t = setTimeout(function()
    {
        $box.fadeOut("slow");
    }, 5000);
});

希望这会对你有所帮助。

Answer 8

哇，没有一个答案给出了简单的解决方案：使用setTimeout并取消点击超时：

$(".fadeOutbox").click(function () {
    // Cache the jQuery object
    var $this = $(this);

    // Do we already have a timer running?
    var timer = $this.data("timer");
    if (timer) {
        // Yes, cancel it
        clearTimeout(timer);
        $this.removeData("timer");
    }

    // (You may want an `else` here, it's not clear)

    // In five seconds, fade out
    $this.data("timer", setTimeout(function() {
        $this.removeData("timer");
        $this.fadeOut('slow');
    }, 5000));
});

我不是百分之百确定以上内容是否触发了您想要的事件，但是这两个相关代码就是这样，它会安排定时操作：

// In five seconds, fade out
$this.data("timer", setTimeout(function() {
    $this.removeData("timer");
    $this.fadeOut('slow');
}, 5000));

这就取消了它（例如，点击时）：

var timer = $this.data("timer");
if (timer) {
    // Yes, cancel it
    clearTimeout(timer);
    $this.removeData("timer");
}

Answer 9

尝试

$('#div').delay(5000).fadeOut(400)

Demo

在jQuery中结合对事件处理程序的操作

9 个答案: