JQuery 现实动画效果
JQuery 现实动画效果
开发工具与关键技术:VS html+css、JQuery
撰写时间:2019年01月17日
在很多网页、项目设置中,有很多都有使用点击某按钮后以动画的方式隐藏某部分内容,又以动画的方式展示某部分内容。
内容的展示和隐藏我们在Javascript里可以用元素的ID绑定元素,给它一个display的属性,隐藏为none,展示则为block。在JQuery中,隐藏为hide,展示为show。当我们直接给它们设置display属性,它产生的效果是很死板,直接隐藏或者直接显示。当我们用JQuery控制他出现的方式和出现的时长会显得页面更有一番风味。下面我们使用JQuery来实现改功能,下面我们来看一个例子。
1、 script标签引入JQuery。
图1 代码块
2、 给各个功能各设置一个按钮,以及一个被控制的div元素。button为按钮标签
图2 代码块
第8页
3、 给各个按钮绑定点击事件。
图3 代码块
4、 页面展示
图4 页面图
第9页