Jquery 单击-->；法登-->；设置超时-->；淡出

我是一名js初学者，正在与一个初学者问题作斗争

我想要的是以下内容：fadeIn a li Element on.单击并在5秒钟后再次淡出。如果s.o.在5秒内多次点击该元件，则开始计算从新元件淡出的5秒时间

我把基本知识放在一起，理论上是这样的：

$("#boxes li").on("click",function() {
    $(this).find(".front,.back").fadeToggle(800).delay(5000).fadeToggle(800);
});

但是，我需要

setTimeout

和

cleartimout

，以便在5秒内再次单击li元素时开始计算新元素的延迟，以便正确淡出

虽然我了解它的理论，但似乎无法掌握它背后的代码

谢谢你的建议，当你试图解释smth时，请记住我是一个初学者

编辑

根据皮特的想法，我制作了一把小提琴，它更像是我想要实现的。由于某些原因，它不太适用于fadeToggle。以下是更新后的fiddle示例：

您会注意到，单击的div不会向后切换，更不用说我希望通过if语句实现的功能了

致以最诚挚的问候，

这应该可以：

var fadeoutnow;
$("#boxes li").on("click",function({

    $(this).find(".front, .back").fadeToggle(800);

    clearTimeout(fadeoutnow);

    //You can assign the timeout function to a variable so that you can clear it (above)
    fadeoutnow = setTimeout(function(){
        $(this).find(".front, .back").fadeToggle(800);
    }, 5000);

});

---

您可以尝试以下方法：

$("#boxes li").on("click",function({    
    $('.front,.back').stop().hide().fadeToggle(800, function() {
        $(this).delay(1500).fadeToggle(800);
    });
});

编辑

如果第二次单击，jQuery将重新设置：

使用

设置超时

和

清除超时

：

更新

多个淡入淡出框-不幸的是，我不能使用

fadeToggle

，因为如果用户在动画序列中间单击，则必须将框保持在特定状态

---

通过阅读jQueryAPI（）并查看他们使用延迟的示例，您可以了解到不仅仅是理论。你也可以在网上搜索settimeout（）示例，并将两者结合起来应用。谢谢blachawk，我知道那个网站和文档，相信我，来这里之前我用谷歌搜索了很多。问题是我是一个初学者，所以我需要一些帮助（即使是基本的东西）来开始。最好的收银员史彼特，那不行。如果我再次单击元素，它将重置计数器，但不是在5秒后淡出，而是先淡出，然后在5秒后淡入。结果应该是，如果单击，它将淡入淡出，当我在延迟内再次单击时，它将保持淡入淡出状态，仅重置延迟的倒计时。最后，它应该会淡出。这是一个有点变通的方法，但它做了你想做的：谢谢皮特，变通的方法奏效了。我仍然不明白为什么我的方法和实际上的@Billy Mathews方法不起作用。对我来说这似乎是最合乎逻辑的想法。。。你的方法可行，但我得想一想，实际上。。。。无论如何，谢谢。我认为问题在于，在接下来的点击中，你必须做一个检查，看看你是否已经完成了动画序列的一半，而不是切换，你需要声明，如果你已经完成了动画的一半，你从可见的对象开始，然后淡出。使用“淡入淡出”切换，它只是从您离开的地方开始，然后朝相反的方向移动嗯。。。有趣。但这个概念是直截了当的。fadeIn和setTimeout淡出后。如果有人在settimeout phase内再次调用该函数，请将其重置，然后执行淡出和晚安。JS很奇怪。。。有时我觉得这是有史以来最具逻辑性的事情，但大多数情况下，作为一个初学者，你会发现逻辑输入对js完全陌生。注：请注意，我不怪js——我知道奇怪的想法来自我的角色。嗨，比利·马修斯，我试图复制你的代码，但它不起作用。所讨论的li元素没有任何作用。如果我试图解释您的代码，那就是在单击的li元素上单击执行以下函数，检查其类是前还是后，并在0.8秒内相应地切换该类。在中，5秒后执行此功能：在0.8秒内切换回类之前，从中逐渐切换li元素。如果我在5秒内再次点击li元素，重置计数器，但执行最后的fadeToggle，对吗？仍然没有运气。什么也没发生。似乎缺少了一个分号左右，因为它也打断了下面的js，到目前为止，js工作得很好。其他建议？@user2132380我不知道为什么。。也许你应该在手动之前声明变量-现在再试？@user2132380，但缺少一个分号。。抱歉：pHi Billy Mathews，仍然不走运-仍然你尝试会破坏后续js。请注意，我只与您交换上述代码行，这将导致无法正常工作。这很奇怪，即使是一个简单的概念，我已经花了好几个小时在这上面了