JSFiddle - React, Tailwind, and code Playground

by Vijayakrishnan Krishnan

HTML

<div class="item start">HELLO</div>
<a href="#" onclick="doAnim(); return false;">Animate 50%</a>
|
<a href="#" onclick="doReset(); return false;">Reset</a>

CSS

.start {
    opacity: 1;
    background-color: red;    
}
.end {
    opacity: 0; 
    background-color: green;    
}

JavaScript

function doAnim() {
    var x = $('.item').animate({
        opacity: 0
    }, {
        step: function(now, fx) {
            if( (now-fx.start) / (fx.end-fx.start) >= 0.5 ) {
                $('.item').stop();
                console.log('animation stopped at 50%');
            }
        }            
    });
    
    /*
    $('.start').switchClass('start', 'end', {
        duration: 2000,
        step: function(now, fx) { // this is totally ignored by jQuery!
console.log('1');
        }            
    });
    */
}

function doReset() {
    $('.item')
        .attr('style', '')
        .removeClass()
        .addClass('item')
        .addClass('start');
}