jQuery实现简单的隐藏效果


jQuery #隐藏2012-06-04 14:14

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>
效果:



相关文章

粤ICP备11097351号-1