JQuery 现实动画效果

    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页