Question

我是初学者并且在初学者问题上挣扎。

我想要的是以下内容：fadeIn一个li-Element on.click，然后再说5秒，再次fadeOut。如果是这样。在5秒内在元素上多次点击，从新的开始计算fadeOut的5秒。

我有基础知识，理论上看起来像这样：

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

但是，我需要setTimeout和clearTimeout才能在5秒内再次点击li-Element时开始计算延迟时间，以便正确淡出。

虽然知道围绕它的理论我似乎并没有处理它背后的代码。

感谢您的任何建议，请记住，当您尝试解释smth时，我是初学者。

编辑

根据Pete的想法，我创造了一个更像我想要实现的小提琴。由于某种原因，它不适用于fadeToggle。以下是小提琴的更新示例：

http://jsfiddle.net/sfiddle/jLurZ/

您会注意到，单击的div不会切换回来，更不用说我想用if语句实现的功能了。

致以最诚挚的问候，

Answer 1

你可以尝试这样的事情：

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

http://jsfiddle.net/gZ3TS/1/

修改

如果第二次点击，则jQuery解决方法重置：http://jsfiddle.net/gZ3TS/6/

使用setTimeout和clearTimeout：http://jsfiddle.net/gZ3TS/11/

<强>更新

多个淡入淡出框 - 遗憾的是我不能使用fadeToggle，因为如果用户在动画序列中间点击，必须将盒子保持在特定状态

http://jsfiddle.net/gZ3TS/31/

Answer 2

这应该有效：

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);

});

点击 - ＆GT;淡入 - ＆GT; setTimout - ＆GT;淡出

2 个答案: