JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<ul id="horizontalAccordion">
            <li>
                <a href="#" id="a1">
                    <img src="http://www.w3cplus.com/sites/default/files/rotate.png" width="69" height="69" alt="" />
                    <p>
                        <strong>旋转rotate</strong>
                        主要介绍如何使用旋转rotate属性...
                    </p>
                </a>
            </li>
            <li>
                <a href="#"> 
                    <img src="http://www.w3cplus.com/sites/default/files/translate-x-y.png" width="69" height="69" alt="" />
                    <p>
                        <strong>移动translate</strong>
                        主要介绍如何使用移动translate...
                    </p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.w3cplus.com/sites/default/files/scale-x-y.png" width="69" height="69" alt="" />
                    <p> 
                        <strong>缩放scale</strong>
                        主要介绍如何使用缩放scale...
                    </p>
                </a>
            </li>
         </ul>

CSS

ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul li{
            float: left;
            padding: 10px;
            display: block;
            margin-right: 10px;
            background: #333;
        }

        ul li a{
            display: block;
            overflow: hidden;
            height: 75px;
            width: 75px;
            text-decoration: none;
            color: #fff;
        }

        #a1{
            width: 210px;
        }

        ul li img{
            position: absolute;
            border: 3px solid #881212;
        }

        ul li p{
            margin: 0;
            padding: 0;
            width: 120px;
            display: block;
            margin-left: 85px;
        }
        
        ul li strong {
            display: block;
        }

JavaScript

$(document).ready(function(){
                    lastBlock = $('#a1');
                    maxWidth = 210;
                    minWidth = 75;
                    
                    $('#horizontalAccordion a').hover(function(){
                        $(lastBlock).animate(
                            {width: minWidth + "px"},
                            {queue:false,duration:400}
                        );
                        $(this).animate(
                            {width:maxWidth + "px"},
                            {queue:false,duration:400}
                        );
                        lastBlock = this;
                    });
                });