Question

我正在制作一个Twitch Streamer应用程序，它使用Twitch API为一组预定的拖缆提取数据。

我有三个按钮可以选择所有/在线/离线频道，我希望将animated shake效果添加到所有这些按钮。

在我第一次尝试时，我进行了简单的if / else检查以使shake正常工作 - 检测animated shake类是否已存在，如果已存在，则删除它，然后添加它再次。否则，只需添加它。

那不起作用。我在这里找到了答案，说它不会那样工作，因为addClass和removeClass发生得如此之快，以至于DOM没有时间赶上来。

然后我使用带有匿名函数的queue在removeClass -

后引起轻微延迟后将类添加回来

if ($(this).hasClass("animated shake")) {
            $(this).removeClass("animated shake").delay(50).queue(
                function() {
                    $(this).addClass("animated shake");
                });
            //$(this).addClass("animated shake");
        } else {
            $(this).addClass("animated shake");
        }

现在，震动效果在90％的情况下起作用，但是如果你在线上/线下频道之间来回切换，那么摇摆不会起作用的情况就会发生。

这是Codepen上的应用。

我很感激任何帮助，为什么它不会每次。

注意 - 目前，摇晃效果仅在在线/离线按钮上。

Answer 1

每次都有效:-D

function shakeButton($button) {
    console.log('Shaking button')
    $button.removeClass("animated shake");
    setTimeout(
      function() {
        $button.addClass("animated shake");
      },
      25
    );
  }

  $('button').click(function() {
    shakeButton($(this));
  });

<!-- Never mind, Just some Dummy html... -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Never mind this, Just some Dummy Results</h4>
<h3>Check out the JS instead</h3>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

我只使用了setTimeout而不是.delay()而且它有效： - ）

干得好，你的代码很好，并且有很好的记录:-但是很少有东西......

在你的代码中...你在三个地方重复相同的代码，而不是你可以创建一个具有该代码的函数，并在任何地方调用该函数;-)这将使调试更容易。
您使用的if语句不是必需的......每次只删除animate和shake个类（它不会抛出任何错误;-)）并在之后添加它们一段时间，这将使代码更简单。

此代码在此代码段中实现... http://codepen.io/shramee/pen/EyZJjN

Answer 2

你能尝试这样的事吗？

$('.btn').on('click', function()
{
    // Siblings will target other buttons but not the current one
    $(this).addClass('animated shake').siblings().removeClass('animated shake');
});

[编辑]更适合您的结构：

根据您的示例结构，为方便起见，您可以在类似.btnWrapper的按钮包装中添加一个类，并执行以下操作：

$('.btn').on('click', function()
{
    var clicked = $(this);
    clicked.addClass('animated shake').parents('.btnWrapper').siblings().find('.shake').removeClass('animated shake');
})

Animate.css震动效果每次都不起作用

2 个答案: