JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul>
<li>
    <ul class="applications">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</li>
</ul>

CSS

li li { cursor: pointer; padding: 20px; background: black; color: white; }

JavaScript

$('ul .applications li').hover(function () {
  $('ul .applications li').stop(true).animate({ opacity: 0.4 }, 800 );
  $(this).stop(true).animate({ opacity: 1 });
}, function () {
  $('ul .applications li').stop(true).animate({ opacity: 1 }, 500 );
});