Animate.css 흔들 효과가 매번 작동하지 않음

Question

미리 결정된 일련의 깃발에 대해 Twitch API를 사용하여 일부 데이터를 가져 오는 Twitch Streamer 애플리케이션을 만들고 있습니다.

나는 모든/온라인/오프라인 채널을 선택할 수있는 세 개의 버튼이 있으며이 모든 버튼에 animated shake 효과를 추가하려고합니다.

처음 시도했을 때 shake이 올바르게 작동하는지 확인하려면 간단한 if/else 체크가 필요합니다. 그렇다면 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()를 사용 그리고 그것은

좋은 작업

:-) 대접을 열심히 코드는 좋은 잘 설명되어 있지만 -DA 몇 가지 ...

1. 에서 귀하의 코드 ... 당신은 그 장소에서 3 개의 장소에서 동일한 코드를 반복합니다 대신 그 코드로 함수를 생성하고 대신에 그 함수를 호출 할 수 있습니다 ;-) 이렇게하면 디버깅이 쉬워집니다.
2. 사용하는 문장은 필요하지 않습니다. 단지 매번 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'); 
})