JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test1">test1</div>
<div id="test1id">test1id</div>

CSS

.test1 { color:red}
#test1id { color:blue; display:none;}

JavaScript

/*
When doing a hide() operation on a class followed by a .show() on an id that contains that class, IE7/8 seem to be playing catch-up with the events and briefly showing the id before the hide hits it iterating through the class objects. For example, if using a speed you will see the item begin to appear then hide after a very brief time. I haven't seen this problem appear in other browsers and it definitely seems to be an order of operation thing since it consistently will briefly appear before being hidden.

I've tried using callbacks from hide() on the class and then firing show() on the id, but that seems to break things overall. I'm wondering if the issue may just be the callbacks breaking. I am using version 1.7.1 of JQuery.
*/

/*
$('.test1').hide();
$('#test1id').show();
*/

/*
$('.test1').hide(300);
$('#test1id').show(300);
*/

$('.test1').hide(300, function(){
    $('#test1id').show(300);
});