百叶窗效果 jquery

百叶窗效果是一种常见的网页动画效果，通常用于展示数据的动态变化或者页面元素的展开与收起。使用jQuery实现百叶窗效果可以非常简单和直观。

基础概念

百叶窗效果模拟了百叶窗的开关动作，通常是通过多个平行的元素（如div）依次显示或隐藏来实现。这种效果可以用于菜单、图片展示、数据列表等多种场景。

类型

水平百叶窗：元素水平排列，依次显示或隐藏。
垂直百叶窗：元素垂直排列，依次显示或隐藏。
混合百叶窗：结合水平和垂直方向的动画效果。

应用场景

菜单导航：用于展开和收起菜单项。
图片轮播：用于展示多张图片的切换效果。
数据展示：用于动态展示和隐藏数据列表。

示例代码

以下是一个使用jQuery实现垂直百叶窗效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百叶窗效果</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .item {
            width: 100%;
            height: 25%;
            background-color: #3498db;
            margin-bottom: 5px;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <button id="toggle">Toggle</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggle').click(function() {
                $('.item').each(function(index) {
                    $(this).delay(index * 100).fadeToggle(500);
                });
            });
        });
    </script>
</body>
</html>