jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()

最新推荐文章于 2023-11-13 20:26:43 发布

柒青衿

最新推荐文章于 2023-11-13 20:26:43 发布

阅读量6.1k

点赞数 1

分类专栏： JavaScript jQuery 文章标签： jQuery 动画

本文链接：https://blog.csdn.net/qiqingjin/article/details/50526019

版权

本文介绍了jQuery中常见的动画效果，包括.hide()/.show()的隐藏显示，.fadeIn()/.fadeOut()的淡入淡出，.slideUp()/.slideDown()的滑上滑下，以及.toggle()/.slideToggle()的切换动画。同时详细讲解了如何自定义动画，如单一元素的单一动画、多个动画的队列和同时发生，以及多元素的动画处理。

摘要由CSDN通过智能技术生成

jQuery动画

以下JS代码公用的HTML：

<span style="font-size:14px;"><div class="control">

                   <buttontype="button" class="button"id="sp2">Show:Paragraph 2</button>

                   <buttontype="button" class="button"id="sp23">Show:Paragraph 2&3</button>

                   <buttontype="button" class="button"id="hp2">Hide:Paragraph 2</button>

                   <buttontype="button" class="button"id="hp23">Hide:Paragraph 2&3</button>

</div>

 

<div class="content">

                   <div><h3>Introduction</h3><p>Inaddition to being ……</p></div>

                   <div><h3>Howit works</h3><p>It turns out t……</p></div>

                   <div><h3>Howto get involved</h3><p>Visual Event is ……</p></div>

                   <div><h3>BuildingVisual Event</h3><p>In order to run a local copy ……</p></div>

</div></span>

1. 隐藏和显示元素

.hide()/.show()

使用.hi