JQuery 现实动画效果

开发工具与关键技术:VS html+css、JQuery
撰写时间:2019年01月17日

在很多网页、项目设置中,有很多都有使用点击某按钮后以动画的方式隐藏某部分内容,又以动画的方式展示某部分内容。 

内容的展示和隐藏我们在Javascript里可以用元素的ID绑定元素,给它一个display的属性,隐藏为none,展示则为block。在JQuery中,隐藏为hide,展示为show。当我们直接给它们设置display属性,它产生的效果是很死板,直接隐藏或者直接显示。当我们用JQuery控制他出现的方式和出现的时长会显得页面更有一番风味。下面我们使用JQuery来实现改功能,下面我们来看一个例子。
1、 script标签引入JQuery。
JQuery 现实动画效果

   图1  代码块

2、 给各个功能各设置一个按钮,以及一个被控制的div元素。button为按钮标签
JQuery 现实动画效果
图2 代码块

第8页
3、 给各个按钮绑定点击事件。

JQuery 现实动画效果

JQuery 现实动画效果

图3 代码块

4、 页面展示

JQuery 现实动画效果

图4 页面图

第9页

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-09-10
  • 2021-08-11
  • 2022-02-10
  • 2022-03-06
  • 2021-07-06
  • 2021-11-19
猜你喜欢
  • 2021-11-17
  • 2022-12-23
  • 2021-08-19
  • 2021-07-22
  • 2021-12-05
相关资源
相似解决方案