JSFiddle - React, Tailwind, and code Playground

by Lindsey Suarez

HTML

<script src="http://alexchen.info/brianfunshine/wp-content/themes/prominent/js/jquery-easing-1.3.pack.js"></script>
<div class="containerStripe">
    <div class="menu">
        <ul>
            <li class="people">
                <div>
                    <a href="#people"></a>
                </div>
            </li>
            <li class="landscapes">
                <div>
                    <a href="#landscapes"></a>
                </div>
            </li>
            <li class="nature">
                <div>
                    <a href="#nature"></a>
                </div>
            </li>
            <li class="abstract">
                <div>
                    <a href="#abstract"></a>
                </div>
            </li>
            <li class="urban">
                <div>
                    <a href="#urban"></a>
                </div>
            </li>
            <li class="people2">
                <div>
                    <a href="#people2"></a>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

div.containerStripe
{
    background-color: #666;
}

div.menu
{
    width: 700px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
}

ul
{
    margin: 0;
    padding: 0;
    height: 200px;
    width: 1400px;
    display: block;
    list-style: none;
    overflow: hidden;
}

ul > li
{
    float: left;
    margin: 0;
    width: 78px;
    height: 200px;
}

ul > li > div
{
    position: relative;
}

ul > li > div > a
{
    position: absolute;
    width: 100%;
    height: 200px;
}

li.people, li.people2
{
    background: url(http://alexchen.info/brianfunshine/wp-content/themes/prominent/images/people.jpg) repeat scroll 0%;
}

li.landscapes
{
    background: url(http://alexchen.info/brianfunshine/wp-content/themes/prominent/images/landscapes.jpg) repeat scroll 0%;
}

li.nature
{
    background: url(http://alexchen.info/brianfunshine/wp-content/themes/prominent/images/nature.jpg) repeat scroll 0%;
}
li.abstract
{
    background: url(http://alexchen.info/brianfunshine/wp-content/themes/prominent/images/abstract.jpg) repeat scroll 0%;
}

li.urban
{
    background: url(http://alexchen.info/brianfunshine/wp-content/themes/prominent/images/urban.jpg) repeat scroll 0%;
}
li.people2
{
    width: 310px;
}

JavaScript

var $j = jQuery.noConflict();

$j(document).ready(function() {
    /**
     * jQuery Accordion
     */

    $j('ul > li').not(".people2").hover(function() {
        // if the element is currently being animated (to a easeOut)...
        if ($j(this).is(':animated')) {
            $j(this).stop().animate({
                width: "310px"
            }, {
                duration: 450,
                easing: "easeOutQuad"
            });
        } else {
            // ease in quickly
            $j(this).stop().animate({
                width: "310px"
            }, {
                duration: 400,
                easing: "easeOutQuad"
            });
        }
    }, function() {
        // on hovering out, ease the element out
        if ($j(this).is(':animated')) {
            $j(this).stop().animate({
                width: "78px"
            }, {
                duration: 400,
                easing: "easeInOutQuad"
            })
        } else {
            // ease out slowly
            $j(this).stop(':animated').animate({
                width: "78px"
            }, {
                duration: 450,
                easing: "easeInOutQuad"
            });
        }
    });
});