Question

我有一个按钮可以切换一些文字淡入/淡出。

在我疯狂地点击按钮（比如说15次）之后，我可以坐下来观看文字不断淡入和淡出15次直到它停止。

我正在寻找一种能阻止用户这样做的解决方案;我一直在调用循环或堆叠动画。

我最初的尝试：

$( "h2" ).click(function(){
    $( this ).toggleClass( "someRed" );
    $( "p" ).fadeToggle( "slow" );
});

Here that is on JSFiddle.

感谢。这感觉非常基本:(

我查看了stop（）和clearQueue（），这些方法不符合我的需要。我讨厌发布SO，但我花了2个小时寻找解决方案而没有运气。

我也尝试添加动画计数器，但它仍然允许循环/堆叠：

var hoverState = 0;
    $( "h2:first" ).bind("click", function(){
    showContent();
});

function showContent(){
    if(hoverState == 0) {
        hoverState = 1;

    $( "h2:first" ).toggleClass( "someRed" );
    $( ".expInfo" ).fadeToggle( "slow" );       
    }
    hoverState = 0;
};

Answer 1

我总是学会做的是，在你的按钮上设置display:none overlay-div。动画开始时，激活按钮上的不可见div，与按钮的大小相同。当有人点击它们时，他们不会点击按钮，而是看不见的div，导致没有动画。然后，在动画结束后，您可以将叠加层放回display:none，等待按钮的下一次单击。：）

编辑：我看到你正在使用fadeToggle。来自https://api.jquery.com/fadeToggle/：

   //On click H2:
   $('#overlay').css('display','block');
   $( "trigger" ).fadeToggle( "fast", function() {
    // When the animation is finished
    $('#overlay').css('display','none');

  });

现在你只需要将div＃overlay定位在h2上，你应该好好去：）

阻止用户连续重复动画

1 个答案: