0

我是 js 初学者，正在努力解决初学者问题。

我想要的是以下内容：fadeIn a li-Element on.click 之后，比如说 5 秒，fadeOut 再次。如果在 5 秒内多次单击元素，则开始计算从新的淡出的 5 秒。

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

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

但是，我需要setTimeout并且clearTimeout为了在 5 秒内再次单击 li-Element 以正确淡出时开始计算新的延迟。

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

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

编辑

根据皮特的想法，我创建了一个更像我想要实现的小提琴。出于某种原因，它不能完全与 fadeToggle 一起使用。这是小提琴的更新示例：

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

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

最好的祝福，

4

2 回答 2

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/

于 2013-03-19T15:05:08.580 回答
0

这应该有效：

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

});
于 2013-03-19T15:03:46.600 回答