2017-09-12 31 views
0

单击元素时,div会从屏幕滑入中心。当点击另一个元件时,在中心以外div滑落在屏幕和另div滑动。如何在动画执行时一次只允许点击一次JavaScript'点击'方法?

当点击另一个元件的初始div具有滑动到屏幕的中心的时间之前发生的问题。

$('#about').click(function(){ 
    /* makes any visible div slide out and slides in the 'about' div */ }); 

$('#contact').click(function(){ 
    /* makes any visible div slide out and slides in the 'contact' div */ }); 

换句话说,当你点击about,并马上点击contact然后他们都滑入不一致。

我已经尝试过“attrRemove”,“unbind”,“off”......虽然他们致力于禁用点击,但我无法再次启用它们。

+0

ü可以包括功能代码为每次点击 –

+0

我不是完全清楚你想对你的点击。仅在动画完成时才工作? –

+0

使用超时或延迟功能 –

回答

0

您可以采取的一种方法是通过使用指示动作当前是否有效的变量。如果要排队的事件(这样你就不会完全无视点击(如下面的例子是做),那么代码可以被修改,以将其添加到某种类型的队列。

var slideInProgress = false; 

$('#about').click(function(){ 
    if (!slideInProgress) { 
     slideInProgress = true; 
     $("#slider").slideToggle(5000, function(){ 
     slideInProgress = false; 
    }); 
    } 
}); 

一很简单,迅速地放在一起捣鼓这个例子是在这里:https://jsfiddle.net/t8tcr0rp/

+0

哇!这实际上工作!我改变的唯一的事情是将'slideInProgress = false;'放在一个单独的'setTimeout'中,并延迟它直到幻灯片执行!谢谢** P沃克**! – Eddy

0

此代码可以帮助

function aboutFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 

function contactFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 


$('#about').on('click', aboutFunc); 
$('#contact').on('click', contactFunc);