jQuery-简单的隐藏效果-优快云博客

本文介绍如何使用jQuery库实现面板元素的淡出隐藏动画效果，通过`.pane.delete`选择器触发面板的淡出动画，并利用`animate`方法和`opacity`属性设置透明度变化，实现平滑的视觉过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jS:

<script type="text/javascript" language="javascript">
        $(document).ready(function () {

            $(".pane .delete").click(function () {
                $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
            });

        });
    </script>

HTML:

 <div class="pane">
        <h3>
            Sample heading</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante
            at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros.
            Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
        <img src="images/btn-delete.gif" alt="delete" class="delete" />
    </div>
    <div class="pane">
        <h3>
            Sample heading_1</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante
            at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros.
            Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
        <img src="images/btn-delete.gif" alt="delete" class="delete">
    </div>