0

我不确定我的标题是否正确，但我想做的是停止 fadeToggle();

当我单击一次它fadeIn 和第二次单击fadeOut 我的覆盖但是当我像疯狂的疯子一样快速单击按钮时它fadeIn 和fadeOut 真的很慢而且有问题......

我想要做的是防止这看起来有问题，因为我正在学习基础知识，我不知道怎么做，但是......所以请谁能告诉我？

这是示例：

$('#overlay-trigger, div#overlay').on('click', function() {
    $('div#overlay').fadeToggle();
});

JS 小提琴示例

所以值得注意的是，我有一个名为#overlay-trigger 的按钮。单击该按钮时，覆盖 fadeIn();

之后点击覆盖隐藏它的自我......

因此，如果您只是继续快速单击，您会发现它有什么问题...它卡住，缓慢，滞后，我不知道正确的短语...

请帮助我，并提前感谢。

4

4 回答 4

2

使用停止像：

$('div#overlay').stop().fadeToggle();

更多信息：http ://api.jquery.com/stop/

于 2012-11-15T22:31:42.777 回答
2

您需要对动画使用 jQuery 的.stop()方法，并传入所需的参数 ex。等.stop(true)_.stop(true,true)

$('#overlay-trigger, div#overlay').on('click', function() {
    $('div#overlay').stop().fadeToggle();
});​

http://jsfiddle.net/nPShy/

于 2012-11-15T22:31:54.123 回答
2

您可以使用：动画选择器..

$('#overlay-trigger, div#overlay').on('click', function() {
    var $overlay = $('div#overlay');
    if( !$overlay.is(':animated')){
        $overlay.fadeToggle();
    }
});

检查小提琴

于 2012-11-15T22:33:48.577 回答
1

使用.one() 可能会解决您的问题。来自 jQuery API 文档：

将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

该one()函数通过在第一次调用后取消绑定单击事件来工作。要从您的代码中修改尽可能少的部分，只需像下面这样使用它：

$('#overlay-trigger, div#overlay').one('click', function() {
    $('div#overlay').fadeToggle();
});

我希望它有所帮助。干杯

于 2012-11-15T22:31:23.680 回答