必威体育Betway必威体育官网
当前位置:首页 > IT技术

jQuery的淡入,淡出

时间:2019-10-07 16:43:23来源:IT技术作者:seo实验室小编阅读:56次「手机版」
 

淡入

开发工具与关键技术:VS, jQuery

作者:陈梅

撰写时间:2019年1月20日

下面我来分享一下我新学习到的jQuery动画技术,淡入、淡出效果

首先我们来看一下页面布局

在这里插入图片描述

在这里插入图片描述

页面布局很简单,设置p,再给p设置宽高等,给淡入效果的p添加隐藏样式。再给每一个p一个按钮,控制它们的淡入,淡出效果。

给每一个按钮放入一个id,方便下面写jQuery代码。好啦!下面开始写jQuery代码啦!

在这里插入图片描述

写jQuery代码也很简单,引用按钮的id,再给按钮一个点击按钮的属性,再为每个p执行淡入,淡出效果。fadeIn()(是淡入的属性)、fadeOut()(是淡出的属性)、fadeToggle()(结合了淡入、淡出的属性),下面来看看效果图

淡入效果:

在这里插入图片描述 在这里插入图片描述 点击黄色按钮,绿色图片就淡入进来了

淡出效果:

在这里插入图片描述 点击红色按钮,紫色的p就淡出了

结合上面两个效果:

在这里插入图片描述 在这里插入图片描述

点击一下蓝色按钮,红色的p就淡出去了,在点击一次,就淡入回来了。

还有个透明(fadaTo();)效果没展现出来,如果你感兴趣的话也可以试着把透明效果弄出来哦!

相关阅读

文件上传----jQuery插件之ajaxFileUpload

jQuery插件之ajaxFileUpload ajaxFileUpload.js 很多同名的,因为做出来一个很容易。我用的是这个:https://github.com/carlcarl/Aj

jquery中find的基本用法和功能

find的功能是:搜索find后面的元素,来执行指定操作。 例如 <!DOCTYPE html><html><head><script type="text/javascript" src="/jque

JQuery控制radio选中和不选中方法总结

一、设置选中方法 复制代码代码如下: $("input[name='名字']").get(0).checked=true; $("input[name='名字']").attr('checked',

jQuery sortable使用详解

先来看看 sortable 有哪些参数?(源自官网 jQuery UI 1.10) 1、appendTo 作用:确定可移动的辅助元素在拖动时可以被添加到何处。 例子

Jquery获取select选中的文本与值

Jquery获取select选中的文本与值 jquery获取select选择的文本与值获取select :获取select 选中的 text :$("#ddlregtype").find("

分享到:

栏目导航

推荐阅读

热门阅读