jQuery的淡入,淡出

开发工具与关键技术:VS, jQuery
作者:陈梅
撰写时间:2019年1月20日

下面我来分享一下我新学习到的jQuery动画技术,淡入、淡出效果
首先我们来看一下页面布局
jQuery的淡入,淡出_第1张图片
jQuery的淡入,淡出_第2张图片
页面布局很简单,设置div,再给div设置宽高等,给淡入效果的div添加隐藏样式。再给每一个div一个按钮,控制它们的淡入,淡出效果。
给每一个按钮放入一个id,方便下面写jQuery代码。好啦!下面开始写jQuery代码啦!
jQuery的淡入,淡出_第3张图片
写jQuery代码也很简单,引用按钮的id,再给按钮一个点击按钮的属性,再为每个div执行淡入,淡出效果。fadeIn()(是淡入的属性)、fadeOut()(是淡出的属性)、fadeToggle()(结合了淡入、淡出的属性),下面来看看效果图
淡入效果:
jQuery的淡入,淡出_第4张图片 jQuery的淡入,淡出_第5张图片 点击黄色按钮,绿色图片就淡入进来了
淡出效果:
jQuery的淡入,淡出_第6张图片 点击红色按钮,紫色的div就淡出了
结合上面两个效果:
jQuery的淡入,淡出_第7张图片 jQuery的淡入,淡出_第8张图片
点击一下蓝色按钮,红色的div就淡出去了,在点击一次,就淡入回来了。
还有个透明(fadaTo();)效果没展现出来,如果你感兴趣的话也可以试着把透明效果弄出来哦!

你可能感兴趣的:(jQuery的淡入,淡出)