在动画完成之前禁用链接以避免快速单击破坏幻灯片的菜单

Posted 2023-05-08

【中文标题】在动画完成之前禁用链接以避免快速单击破坏幻灯片的菜单

【英文标题】：Disable links until animation is finished to avoid fast clicking on menu that ruins the slideshow

【发布时间】：2011-06-28 23:04:00

【问题描述】：

我有一个带有 jQ​​uery Cycle 的幻灯片。我已经对其进行了相当多的操作，因此它的工作方式与标准完全不同。

现在我有一个问题。如果您通过菜单快速单击激活幻灯片，它将破坏幻灯片。我需要停用菜单，直到动画完成。我有一个“动画后”空间，我可以在其中放置某种“就绪”功能。我只是不知道该怎么做。

$('.slideshow').cycle(
    after: function(curr,next,opts) 
        //here I can add a "Ready" function i guess
           
);

Menu: //这是我使用的菜单。我想我可以在这里添加一个“禁用菜单”规则，但是再次......我不知道如何...... :-(

$('#menu li a').click(function() 
    window.location.hash = $(this).attr('href');
    //$('.slideshow').cycle($(this).parent().index());
    index = $(this).parent().index();
    return false; 

);

或者你有别的想法？

【参考方案1】：

这可能有用....虽然没有尝试过...

var ready = false;

$('.slideshow').cycle(
    after: function(curr,next,opts) 
        //here I can add a "Ready" function i guess
        ready = true;
           
);

$('#menu li a').click(function() 
    if (! ready )  return false; 
    window.location.hash = $(this).attr('href');
    //$('.slideshow').cycle($(this).parent().index());
    index = $(this).parent().index();
    ready = false;
    return false; 

);

【讨论】：

没有 if (!ready) return false; 它就像一个魅力......谢谢。

【参考方案2】：

您可以简单地显示/隐藏具有高 z-index 值的透明 div，这将禁用您页面上的链接，如下所述：

http://fczaja.blogspot.com/2009/02/disable-all-page-elements-with.html

【讨论】：

我想用纯js来做，以避免做不必要的标记。