jQuery-淡入淡出效果-fadeIn()淡进 fadeOut()淡出 fadeToggle();
动画
高级函数:基于底层函数又进行了封装
两大块:简化版的动画函数和万能动画函数
简化版动画函数
显示/隐藏$().show; $(...).hide();
强调:无参数的show()/hide()使用的是display属性
瞬间隐藏和显示
动画参数:speed:
2种:1.三档: fast normal slow 慢中快
2.用毫秒数自定义
动画的速度变化:参数:easing:linear线性变化 swing摇摆属性先加速后减速
伸缩/折叠slideUp向上 slideDown向下 slideTogger()切换
淡入/淡出:fadeIn()淡进 fadeOut()淡出 fadeToggle();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>jQuery动画函数-显示隐藏动画</h1>
<button id="bt1">隐藏DIV</button>
<!--div#target>p>lorem+Tab键-->
<div id="target">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem dicta doloribus eius fugit illum
ipsum, itaque laborum laudantium modi necessitatibus, nulla, numquam odio qui quisquam sequi temporibus tenetur
veniam?</p>
</div>
<script src="javascript/jquery-1.11.3.js"></script>
<script>
//为id为bt1的按钮绑定单击事件:
$("#bt1").click(function(){
$("#target").fadeToggle(500);
//toggle切换隐藏/显示效果
});
//让id为target的div隐藏
</script>
</body>
</html>
jQuery-淡入淡出效果-fadeIn()淡进 fadeOut()淡出 fadeToggle();的更多相关文章
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- JQuery显示,隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- jQuery学习四——效果
1.显示,隐藏: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </he ...
- Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- jQuery练手:仿新浪微博图片文字列表淡进淡出上下滚动效果
1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...
- jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- 基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()
fadeIn(),fadeOut(),fadeToggle(),fadeTo() fadeIn()-----淡入已经隐藏的元素(把隐藏的被选元素渐渐显示出来). 语法:$(selector).fade ...
随机推荐
- shell技巧之以逆序形式打印行
测试文本内容如下: # cat textfile hadoop hdfs yarn spark zookeeper mapreduce hive hbase scala kafka CHAVIN my ...
- python immutable and mutable
https://blog.csdn.net/hsuxu/article/details/7785835 python mutable as default parameter(NONONO) def ...
- BTree和B+Tree详解
https://www.cnblogs.com/vianzhang/p/7922426.html B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引.B+树中的B代表平 ...
- MyEvent.SetEvent; // 同步信号置位
MyEvent.SetEvent; // 同步信号置位 TSimpleEvent.Create = TEvent.Create(nil, True, False, nil) ...
- python,re模块正则
python没有正则需要导入re模块调用.正则表达式是为了匹配字符串,动态模糊的匹配,只要有返回就匹配到了, 没返回就没匹配到,前面是格式后面是字符串 最常用的匹配语法: re.match()#麦驰, ...
- linux read()和write
参考http://www.cnblogs.com/xiehongfeng100/p/4619451.html 1. read总是在接收缓冲区有数据时立即返回,而不是等到给定的read buffer填满 ...
- xpath定位方法详解
1.xpath较复杂的定位方法: 现在要引用id为“J_password”的input元素,可以像下面这样写: WebElement password = driver.findElement(By. ...
- 【Python学习 】Python获取命令行参数的方法
背景 最近编写一个python程序的时候,需要去获取python命令行的参数,因此这里记录下如何获取命令行参数的方法. 一.sys 模块 在 Python 中,sys 模块是一个非常常用且十分重要的模 ...
- oracle中is和as的区别
在存储过程(PROCEDURE)和函数(FUNCTION)中没有区别:在视图(VIEW)中只能用AS不能用IS:在游标(CURSOR)中只能用IS不能用AS.
- dispatch_queue_set_specific可重入的gcd
有时候我们很希望知道当前执行的queue是谁,比如UI操作需要放在main queue中执行.如果可以知道当前工作的queue是谁,就可以很方便的指定一段代码操作在特定的queue中执行.这种做法让G ...