代码之家 › 专栏 › 技术社区 › Dust_In_The_Wind

使有生气css震动效果每次都不起作用

animate.css css jquery javascript

Dust_In_The_Wind · 技术社区 · 8 年前

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

我有三个按钮可以选择所有/在线/离线频道,我希望添加 animated shake 影响所有这些按钮。

在我第一次尝试时,我进行了一个简单的if/else检查,以使 shake 正确工作-检测 动画抖动 类已经存在,如果存在,请删除它,然后再次添加它。否则,只需添加它。

那不管用。我在这里找到了一个答案,说它不会那样做,因为 addClass 和 removeClass 发生得如此之快,以至于DOM没有时间跟上。

然后我用了一个 queue 使用匿名函数在 删除类 -

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");
        }

这是上的应用程序 Codepen .

我很感激你能帮我解释为什么它不起作用每次 .

注意-目前,震动效果仅在联机/脱机按钮上。

2 回复 | 直到 8 年前

shramee 8 年前

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() 而且效果很好:-)

干得好,你的代码很好,并且有很好的文档记录:-D尽管有一些事情。。。

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

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

antoni 8 年前

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

[EDIT]与您的结构更相关:

根据您的示例结构,您可以向按钮包装器添加一个类,如 .btnWrapper 为方便起见,请执行以下操作:

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