jQuery addClass example

Change class name on click in jQuery

by CarambaMoreno

HTML

<div id="button" class="button">
    <p>Click Me</p>
</div>
  
<div id="box" class="box">  
</div>

CSS

.box {
    width: 100px;
    height: 100px;
    background: hotpink;
    animation: growBox 3s linear 0s infinite normal;
}
@keyframes growBox {

    to {
        width: 300px;
        height: 200px;
    }

}
.change-size {
    
}

JavaScript

var myButton = $('#button'),
       myBox = $('#box');
       
       
       myButton.click(function () { 

    myBox.addClass('change-size');
  
    myBox.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {
    
    // code to execute after animation ends

    myBox.removeClass('change-size');
    alert('hola');
    });

});

function animEndTrigger(e) {
    if (!e) {
        return false;
    }
    else {
        var animName = e.originalEvent.animationName;
        alert (animName + 'FunctionTrigger');
    }
}
$('.box').on('webkitAnimationEnd', function(e) {
    $(this).trigger(animEndTrigger(e));
});