Активировать CSS анимацию с помощью jQuery?

Question

Я получил красный квадрат (DIV), и каждый раз, когда я нажимаю на него, мне нравится, что он плавно исчезает с помощью CSS-анимации.

<div id="BLOCK" style="background-color:red;width:150px;height:150px;">RED SQUARE</div>

<script>$('#BLOCK').click( function() {} );</script>

Когда я вешаю анимацию на класс, такая затухание работает:

<script>$('#BLOCK').click( function() { $('#BLOCK').addClass('fade'); } );</script>

Но как только я нажимаю снова, ничего не происходит, что довольно логично, потому что класс уже добавлен. Но это не работает.

<script>$('#BLOCK').click( function() { $('#BLOCK').removeClass('fade'); $('#BLOCK').addClass('fade'); } );</script>

Так кто-нибудь знает лучший способ?

Answer 1

сделал быстрый пример:

http://jsfiddle.net/Uc8vn/

$(function(){
    $('a').click(function(ev){
       $('div').toggleClass('fade'); 
        ev.preventDefault();
    });
});​

div{
    transition:opacity .3s linear;   
    -moz-transition:opacity .3s linear;   
    -webkit-transition:opacity .3s linear;   
    opacity:1;
    width:100px;
    height:100px;
    background:red;
}
div.fade{
    opacity:0;   
}
​

Answer 2

вот краткий пример анимации с добавлением и удалением класса.

http://jsfiddle.net/q8ew0a5b/6/

$( "#stop" ).click(function() {
  $( "#animated" ).addClass( "off" );
});
$( "#start" ).click(function() {
  $( "#animated" ).removeClass( "off" );
});

@keyframes grow {
	0% {
		width: 100px;
		height: 100px;
	}
	
	100% {
		width: 120px;
		height: 120px;
	}
}

#animated {
	width: 100px;
	height: 100px;
	background: silver;
	margin: 1em 0;
	animation: grow 1s infinite;
}

#animated.off {
	animation-name: none;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button id="stop">Stop</button>
  <button id="start">Start</button>
</p>
<div id="animated"></div>

Answer 3

Вы также можете приостанавливать и воспроизводить анимации, используя свойство animation-play-state.Я использовал глобальную переменную, чтобы предотвратить всплывание анимации.

См. Эту короткую демонстрационную скрипку здесь -> http://jsfiddle.net/d5mym5e7/6/

var running = 0;
$('#fade').on('click',function(){
    if (running === 0){
        running = 1;
        $('.box').css({
            '-webkit-animation-play-state':'running'
        });
        setTimeout(function(){
            $('.box').css({
                '-webkit-animation-play-state':'paused'
            });
            running = 0;
            console.log(running);
        },4000);
    } else {
        console.log('let me finish');
    }
});

Answer 4

Если вы уже используете jQuery, почему бы вам не сделать анимацию фадина с jQuery?

$('#BLOCK').click(function() {
    $(this).fadeIn(function () { // Callback for chaining
        $(this).fadeOut();
    );
});