欢迎使用优快云-markdown编辑器

最新推荐文章于 2025-08-08 09:39:17 发布

原创最新推荐文章于 2025-08-08 09:39:17 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的显示/隐藏动画效果案例。通过点击按钮，可以触发div元素的高度、边框及透明度的切换动画，动画时间为1秒。该案例展示了如何结合HTML、CSS与JavaScript来制作简单的网页交互效果。

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

使用jQuery动画函数—-显示隐藏元素

css：

<style>
    *{margin:0; padding:0;}
    #target{
        border-radius:10px;
        background:#eee;
    }
</style>

html:

<body>
    <h1>jQuery动画函数——显示隐藏动画</h1>
    <button id="btn1">显示/隐藏div</button>
    <div id="target">
        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis animi sint iste sequi sunt ad excepturi error labore molestiae est expedita eos nisi placeat provident dolorem quos facilis! Sapiente!</span><span>Accusamus neque id reprehenderit! Voluptatem in deleniti laboriosam commodi facere magnam impedit minima corrupti distinctio culpa amet optio natus esse. Inventore incidunt ab id perspiciatis atque minus magnam tempore harum.</span></p>
    </div>
</body>

js:

<script>
    $('#btn1').click(e=>{
       $("#target").animate({
              height:'toggle',
               border:'toggle',
               opacity:'toggle'
           },1000,()=>{
             console.log("动画结束");
        })
    });
</script>