JQuery效果-淡入淡出、滑动、动画
一、JQuery Fading方法
JQuery 有四种fade方法
1.fadeIn() 淡入 对应也有$(selector).fadeIn(speed,callback);
2.fadeOut() 淡出 对应也有$(selector).fadeOut(speed,callback);
3.fadeToggle() 对应也有$(selector).fadeToggle(speed,callback);
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
4.fadeTo() 对应的$(selector).fadeTo(speed,opacity,callback);//必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
二、jQuery 拥有以下滑动方法
1.slideDown() 滑入(滑下) 对应也有$(selector).slideDown(speed,callback);
2.slideUp() 滑出(滑上) 对应也有$(selector).slideUp(speed,callback);
3.slideToggle() 滑入/滑出 对应也有$(selector).slideToggle(speed,callback);
三、JQuery动画
$(selector).animate({params},speed,callback);
必须的prams参数定义形成动画的CSS属性
可选的speed参数规定效果的时长。它可以去以下值:"slow","fast"或者毫秒
可选的 callback 参数是动画完成后所执行的函数名称。
下面是几个例子:
1,操作多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
2,定义相对值(该值相对于元素的当前值),需要在值的前面加上+=或-=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
3. 使用预定义的值
把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
4.使用队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
将元素移到右边,然后增大文本字号
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
四、停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画
五、JQuery中方法链接
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
JQuery效果-淡入淡出、滑动、动画的更多相关文章
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- jQuery 效果 - 淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn()演示 jQuery fadeIn() 方法. jQuery fadeOut()演示 ...
- jQuery 效果 – 淡入淡出
在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuer ...
- 松软科技课堂:jQuery 效果 - 淡入淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- jQuery效果-淡入淡出
本文实现一个控制出现.消失.透明度的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- 利用jQuery的淡入淡出实现轮播器
基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
随机推荐
- Linux网卡驱动安装、防火墙原理
安装网卡驱动程序: 需要检查是否安装kernel依赖包: rpm –q kernel-devel #检查kernel依赖包是否安装 yum –y install kernel-devel 检查gcc和 ...
- 把int*传值给char*,打印出错误的数字
首先进入debug模式查看i的地址也就是ptr的值 以16进制位小端模式存储(一个整型四个字节,8位16进制数)(根据系统位数情况) 紧接着因为ptr是char*型指针变量,读取数据时按照一个字节一个 ...
- 学习笔记:发现一个IE版本判断的好方法
web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题.在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法. 常规js方法 找到一个方法,还不错,可以识别出各 ...
- vs 2015 "加载该页时出错。" 解决方案
错误信息: 加载该页时出错. 未找到与约束 ContractName Microsoft.CodeAnalysis.Editor.TypeScript.ScriptContexts.ITypeSc ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- [转]安装 SciTE 报错 No package ‘gtk+-2.0′ found
centos 记事本,有时候感觉不够用,或者 出毛病,打不开文件 然后决定安装个其他的记事本, 找来找去, 感觉 SciTE 还可以,于是下载源码编译安装,结果 No package ‘gtk+-2 ...
- SqlService过期的解决方案
看图吧,不喜欢说话,图里面我都打备注了 0SQLService异常 1找到安装中心 2升级版本 3监测ing 4输入升级key 5同意并下一步 6下一步 7下一步 8下一步 9收工 10可以打开了
- SQL Server 批量完整备份
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 实现方式一(One) 实现方式二(Two) 实现方式三(Thr ...
- Kafka 文档用例
1.2 用例 以下是一些Kafka 常见的用例.关于功能方面的一些概念,可以看这篇博客:http://engineering.linkedin.com/distributed-systems/log- ...
- http程序接口、调用(最入门级,文末附Demo)
HTTP协议简介 既然是基于HTTP协议开发,那么就首先要了解下HTTP协议的相关内容- 在TCP/IP体系结构中,HTTP属于应用层协议,位于TCP/IP协议的顶层.浏览Web时,浏览器通过HTTP ...