JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<p>This example uses <strong>fadeIn</strong> and fadeOut. Mouseover all three rapidly and soon the boxes will no longer appear! FireBug shows opacities are remaining set.</p>

<ul>
    <li class="foobar foo1"><a href="/">Mouseover me to show a blue box!</a>
        <span class="sub">What?</span>
    </li>
    <li class="foobar foo2"><a href="/">Mouseover me to show a red box!</a>
        <span class="sub">What?</span>
    </li>
    <li class="foobar foo3"><a href="/">Mouseover me to show a green box!</a>
        <span class="sub">What?</span>
    </li>
</ul>

<br>

<p>This example uses <strong>fadeTo</strong> and fadeOut</p>

<ul>
    <li class="foobar2 foo1"><a href="/">Mouseover me to show a blue box!</a>
        <span class="sub">What?</span>
    </li>
    <li class="foobar2 foo2"><a href="/">Mouseover me to show a red box!</a>
        <span class="sub">What?</span>
    </li>
    <li class="foobar2 foo3"><a href="/">Mouseover me to show a green box!</a>
        <span class="sub">What?</span>
    </li>
</ul>

CSS

.foobar, .foobar2 { position:relative; }
.sub { position:absolute;left:50px;top:50px;width:50px;height:50px;display:none; }
.foo1 .sub { background:blue; }
.foo2 .sub { background:red; }
.foo3 .sub { background:green; }

JavaScript

$('.foobar').hover(function() {
    $(this).find('.sub').stop(true, true).delay(600).fadeIn('400');
}, function() {
    $(this).find('.sub').stop(true, true).delay(600).fadeOut('400');
});

$('.foobar2').hover(function() {
    $(this).find('.sub').stop(true, true).delay(600).fadeTo('400',1);
}, function() {
    $(this).find('.sub').stop(true, true).delay(600).fadeOut('400');
});