JSFiddle - React, Tailwind, and code Playground

HTML

<p>The second fader ("I fade and shouldn't stop!") shouldn't be affected by the first fader ("I fade and stop") .stop(), but it is!</p><br /><br />

<div id="fader">I fade and shouldn't stop!</div>

<div id="other">I fade and stop</div>
<div id="hidden">I was hidden</div>

CSS

#hidden { display: none }

JavaScript

$('#other').fadeOut(2000);
$('#hidden').fadeIn(1000, function() {
    $('#other').stop().hide();
});

$('#fader').fadeOut(2000);