Animate.css抖動效果每次都不工作

我正在製作一個Twitch Streamer應用程序，該應用程序使用Twitch API爲一組預定義的拖放器提取一些數據。Animate.css抖動效果每次都不工作

我有三個按鈕來選擇所有/在線/離線頻道，並且我正在爲所有這些按鈕添加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上的應用程序。

我會很感激任何幫助，爲什麼它不工作每一次。

注 - 搖動效果現在只在在線/離線按鈕上。

來源

2016-06-27 Manish Giri

該作品每日:-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()和它的工作一種享受:-)

好工作，你的代碼是好的和有據可查的：〜DA幾件事情，但...

在你的代碼...你在三個地方重複相同的代碼，而是可以用該代碼創建一個函數，然後在任何地方調用該函數;-)這將使調試更容易。
您使用的if聲明不是必需的......每次刪除animate和shake類（它不會拋出任何錯誤;-)）並在一段時間後再添加它們，這將使代碼更簡單。

此代碼是在這個片段中實現... http://codepen.io/shramee/pen/EyZJjN

來源

2016-06-27 04:51:03 shramee

爲希望感謝，併爲您的反饋:)對於你的觀點1，你指的是代碼爲這個'動畫shake'的事情嗎？如果是這樣，這是一個好主意！因爲代碼無法正常工作，所以我沒有想到重構。現在就試試你的版本... –

是啊，談論'animate shake'的代碼:-)讓我知道它是如何適用於你的; ;-) – shramee

它適合你嗎？ – shramee

你可以嘗試這樣的事情嗎？

$('.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'); 
})

來源

2016-06-27 04:12:01 antoni

Animate.css抖動效果每次都不工作

回答

相關問題