JSFiddle - React, Tailwind, and code Playground

by chrisk

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<div id="promo">
  <ul>
    <li class="promo1">d</li>
    <li class="promo2">d</li>
    <li class="promo3">d</li>
    <li class="promo4">d</li>
    <li class="promo5">d</li>
  </ul>
</div>

CSS

#promo { width:404x; height:200px; overflow:hidden; }
#promo ul { width:105%; }
#promo li { float:left; height:200px; margin-right:1px; width:50px; }
#promo .promo1 { background:red; width:200px; }
#promo .promo2 { background:green; }
#promo .promo3 { background:red; }
#promo .promo4 { background:green; }
#promo .promo5 { background:red; margin-right:0px; }

JavaScript

$("#promo li").hoverIntent(
    function () {
        $('#promo li').animate({width:50},{duration:500,queue:false});
        $(this).animate({width:200},{duration:500});
    }, 
    function () {}
);