当前位置：网站首页>Accordion effect

Accordion effect

2022-07-23 11:56:00 【Zhou million】

Effect display ：

html part ：

<body>
    <div class="container">
        <ul>
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt="" class="small">
                    <img src="images/1.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/2.jpg" alt="" class="small">
                    <img src="images/2.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.jpg" alt="" class="small">
                    <img src="images/3.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/4.jpg" alt="" class="small">
                    <img src="images/4.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/5.jpg" alt="" class="small">
                    <img src="images/5.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/6.jpg" alt="" class="small">
                    <img src="images/6.jpg" alt="" class="big">
                </a>
            </li>

        </ul>
    </div>
</body>

css part ：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            box-sizing: border-box;
        }
        
        .container {
            border-radius: 10px;
            width: 490px;
            height: 90px;
            background-color: #eeeddd;
            margin: 0 auto;
            padding: 10px;
        }
        
        ul {
            width: 700px;
        }
        
        ul li {
            overflow: hidden;
            position: relative;
            list-style: none;
            float: left;
            width: 70px;
            height: 70px;
            margin-right: 10px;
        }
        
        ul li .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
        
        ul li .big {
            width: 224px;
            display: none;
        }
    </style>

JQuery part ：

<script src="jquery.min.js"></script>
<script>
$(function() {
// When the mouse moves to ul Inside li Last time ,
// li My brothers became 69px, Small pictures fade in , Big pictures fade out （ It's similar to exclusive thought ）
$('ul li').mouseenter(function() {
// When the mouse enters '.container', Let his own width become 700px
$('.container').stop().animate({
width: 650
}, 1000);
// use animate() Method , Will the current li Change the width of to 224px
$(this).stop().animate({
width: 224
// Let small pictures '.small' Fade out , Big picture '.big' Fade in ,
}, 1000).find('.small').stop().fadeOut(1000).siblings('.big').stop().fadeIn(1000);
// At the same time, carry out an exclusive thought , Give Way li My brother has become a standard state （ It's similar to exclusive thought ）
$(this).siblings().stop().animate({
width: 69
}, 1000).find('.small').stop().fadeIn(1000).siblings('.big').stop().fadeOut(1000);
// When the mouse goes away .container The box , be-all li All become standard
});
$('.container').mouseleave(function() {
// When you leave, let '.container' Return to the original size
$('.container').stop().animate({
width: 490
}, 1000);
$('ul li').stop().animate({
width: 69
}, 1000).find('.small').stop().fadeIn(1000).siblings('.big').stop().fadeOut(1000);
})
})
</script>