jquery动画效果学习笔记经验介绍 _ 路由器设置|192.168.1.1|无线路由器设置|192.168.0.1 - 路饭网
您的位置： >
> 阅读资讯：jquery动画效果学习笔记经验介绍
jquery动画效果学习笔记经验介绍
jquery动画效果学习笔记经验介绍
1、元素的显示和隐藏
display: 隐藏
display: 显示
简单显示和隐藏方法
a) show() 显示
b) hide() 隐藏
c) toggle() 开关，显示则隐藏，隐藏则显示
&script type=&text/javascript&&
function f1(){
$(&div&).hide();//display:none
//document.getElementById('id').style.display=&none&;
function f2(){
$(&div&).show();//display:block
function f3(){
$(&div&).toggle();
&style type=&text/css&&
div {width:300 height:200 background-color:}
&div&duck and dog&/div&
&input type=&button& value=&隐藏& onclick=&f1()& /&
&input type=&button& value=&显示& onclick=&f2()& /&
&input type=&button& value=&开关效果& onclick=&f3()& /&
CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。
具体说明如下：
visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。
display 隐藏后，隐藏的元素不再占用文档的位置。
2、滑动效果显示和隐藏
slideUp(speed[,callback]) 向上滑动元素并最终隐藏
slideDown(speed[,callback]) 向下滑动元素并最终显示
slideToggle(speed[,callback])
speed：设置效果的速度(slow（600）normal（400） fast（200） 时间(毫秒))
callback: 效果执行完毕之后自动调用的回调函数
&script type=&text/javascript&&
function f1(){
$(&div&).slideUp(3000,function(){
alert('我消失了，你能看到么');
function f2(){
$(&div&).slideDown(3000,function(){
alert('我又回来了');
});//display:block
function f3(){
$(&div&).slideToggle(1000);
$(function(){
//气缸滑动效果
//setInterval(&f3()&,1000);
&style type=&text/css&&
div {width:300 height:200 background-color:}
&div&duck and dog&/div&
&input type=&button& value=&隐藏& onclick=&f1()& /&
&input type=&button& value=&显示& onclick=&f2()& /&
&input type=&button& value=&开关效果& onclick=&f3()& /&
3、淡入淡出效果
让元素通过一定透明度变化，达到显示和隐藏的效果
fadeIn(speed, [callback])
fadeOut(speed, [callback])
fadeToggle(speed, [callback])开关效果
fadeTo(speed, opacity, [callback]) 把div设置一定透明度（0-1）0.3就是30%透明度
&script type=&text/javascript&&
function f1(){
$(&div&).fadeOut(4000);
function f2(){
$(&div&).fadeIn(4000);
$(&#two&).fadeTo();
function f3(){
$(&div&).fadeToggle(2000);
&style type=&text/css&&
div {width:300 height:200 background-color:}
&div id = &two&&duck and dog&/div&
&input type=&button& value=&隐藏& onclick=&f1()& /&
&input type=&button& value=&显示& onclick=&f2()& /&
&input type=&button& value=&开关效果& onclick=&f3()& /&
设置透明度，div的透明度是30%：
4、动画效果底层方法animate()
show() hide() 等等动画效果内部都是执行animate()方法
$().animate(css效果参数[，时间][，回调函数]);
css()等一般jquery方法执行完毕之后会返回当前jquery对象，因此jquery的许多方法可以链式调用。
&script type=&text/javascript&&
function f1(){
//文字大孝文字粗体、div本身宽度和高度
//font-size background-color color
console.log($(&div&));
//jquery对象调用完毕css方法本身还是一个jquery对象
//说明css方法执行完毕有return this关键字
console.log($(&div&).css('font-weight','bold').css(&background-color&,'pink'));
var jn = {'font-size':'30px',width:'400px',height:'300px'};
$(&div&).css('font-weight',&bold&).css(&background-color&,&pink&).css(&color&,&white&).animate(jn,2000);
//$(&div&).animate(jn,2000);
&style type=&text/css&&
div {width:300 height:200 background-color: }
&div&duck and dog&/div&
&input type=&button& value=&设置& onclick=&f1()& /&
5、累加累减动画
如果动画一次设定left：500 ,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:&500px&改成left:&+=500px&或者left:&-=500px&即可。
(function(){
$(&#panel&).click(function(){
$(this).animate({left: &+=500px&}, 3000);
6、多重动画
1、同时执行多个动画
上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px
$(function(){
$(&#panel&).click(function(){
$(this).animate({left: &500px&,height:&200px&}, 3000);
2、顺序执行动画
上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可
$(function(){
$(&#panel&).click(function(){
$(this).animate({left: &500px&},3000)
.animate({height:&200px&},1000);
3、综合动画
接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这
些效果后让它以淡出的方式隐藏掉。
$(function(){
$(&#panel&).css(&opacity&,0.5);//设置不透明度
$(&#panel&).click(function(){
$(this).animate({left: &400px&,height:&200px&,opacity:&1&},3000)
.animate({top:&200px&,width:&200px&},3000)
.fadeOut(1000);
7、动画回调函数
在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了
$(function(){
$(&#panel&).css(&opacity&,0.5);//设置不透明度
$(&#panel&).click(function(){
$(this).animate({left: &400px&,height:&200px&,opacity:&1&},3000)
.animate({top:&200px&,width:&200px&},3000,function(){$(this).css(&border&,&5px solid blue&)});
这样就把css方法加入到动画队列中了。
8、停止动画和判断是否处于动画状态
1、停止元素的动画
stop([clearQueue][,gotoEnd]) 两个都是可选参数，都是boolean类型
参数说明：
clearQueue：代表是否清空未执行完的动画队列
gotoEnd ：代表是否将正在执行的动画跳到末状态
通过一个综合的示例就可以弄明白stop()方法的这两个参数了：
&style type=&text/css&&
*{margin:0;padding:0;}
body { font-size: 13 line-height: 130%; padding: 60px }
#panel { width: 60 border: 1px solid #0050D0 ;height:22overflow:}
.head { padding: 5 background: #96E555; cursor:width: 300}
.content { padding: 10 text-indent: 2 border-top: 1px solid #0050D0;display: width:280}
&script src=&../../../scripts/jquery.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
$(function(){
$(&button:eq(0)&).click(function () {
$(&#panel&)
.animate({height : &150& } , 2000 )
.animate({width : &300& } , 2000 )
.hide(3000)
.animate({height : &show& , width : &show& , opacity : &show& } , 2000 )
.animate({height : &500&} , 2000 );
$(&button:eq(1)&).click(function () {
$(&#panel&).stop();//停止当前动画，继续下一个动画
$(&button:eq(2)&).click(function () {
$(&#panel&).stop(true);//清除元素的所有动画
$(&button:eq(3)&).click(function () {
$(&#panel&).stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画
$(&button:eq(4)&).click(function () {
$(&#panel&).stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态
&button&开始一连串动画&/button&
&button&stop()&/button&
&button&stop(true)&/button&
&button&stop(false,true)&/button&
&button&stop(true,true)&/button&
&div id=&panel&&
&h5 class=&head&&三国杀杀天下&/h5&
&div class=&content&&
夏侯难劬Γ窖返牧嗡韭砩钌畹幕
2、判断元素是否处于动画状态
当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。
解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。
if(!$(element).is(&:animated&)){
//添加新的动画
通过本文对8种jquery动画效果的详细剖析，玩转jquery动画效果，希望大家喜欢这篇针对jquery动画效果进行全面介绍的文章。
本文地址：
相关文章列表jQuery 效果
jQuery 效果
jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：
$(&#hide&).click(function(){
$(&p&).hide();
$(&#show&).click(function(){
$(&p&).show();
hide() 和 show() 都可以设置两个可选参数：speed 和 callback。
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值：&slow&, &fast&, &normal& 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
$(&button&).click(function(){
$(&p&).hide(1000);
jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
$(selector).toggle(speed,callback)
speed 参数可以设置这些值：&slow&, &fast&, &normal& 或 毫秒。
$(&button&).click(function(){
$(&p&).toggle();
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed 参数可以设置这些值：&slow&, &fast&, &normal& 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
$(&.flip&).click(function(){
$(&.panel&).slideDown();
slideUp() 实例
$(&.flip&).click(function(){
$(&.panel&).slideUp()
slideToggle() 实例
$(&.flip&).click(function(){
$(&.panel&).slideToggle();
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数：
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
speed 参数可以设置这些值：&slow&, &fast&, &normal& 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
fadeTo() 实例
$(&button&).click(function(){
$(&div&).fadeTo(&slow&,0.25);
fadeOut() 实例
$(&button&).click(function(){
$(&div&).fadeOut(4000);
jQuery 自定义动画
jQuery 函数创建自定义动画的语法：
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：
animate({width:&70%&,opacity:0.4,marginLeft:&0.6in&,fontSize:&3em&});
第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是：&slow&, &fast&, &normal& 或毫秒。
&script type=&text/javascript&&
$(document).ready(function(){
$(&#start&).click(function(){
$(&#box&).animate({height:300},&slow&);
$(&#box&).animate({width:300},&slow&);
$(&#box&).animate({height:100},&slow&);
$(&#box&).animate({width:100},&slow&);
&script type=&text/javascript&&
$(document).ready(function(){
$(&#start&).click(function(){
$(&#box&).animate({left:&100px&},&slow&);
$(&#box&).animate({fontSize:&3em&},&slow&);
HTML 元素默认是静态定位，且无法移动。
如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。
演示简单的 jQuery hide() 函数。 另一个 hide() 演示。如何隐藏部分文本。 演示简单的 slide panel 效果。 演示简单的 jQuery fadeOut() 函数。 演示简单的 jQuery animate() 函数。
jQuery 效果
$(selector).hide()
隐藏被选元素
$(selector).show()
显示被选元素
$(selector).toggle()
切换（在隐藏与显示之间）被选元素
$(selector).slideDown()
向下滑动（显示）被选元素
$(selector).slideUp()
向上滑动（隐藏）被选元素
$(selector).slideToggle()
对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()
淡入被选元素
$(selector).fadeOut()
淡出被选元素
$(selector).fadeTo()
把被选元素淡出为给定的不透明度
$(selector).animate()
对被选元素执行自定义动画
如需完整的参考手册，请参考 jQuery Effect 参考手册。您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
按住视频可进行拖动
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
收藏成功，可进入查看所有收藏列表
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看：
JavaScript库——JQuery之各类动画效果的实现
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
爸爸去哪儿2游戏 立即参与
JavaScript库——JQuery之各类动画效果的实现
播放量数据：
3,869人已订阅
你可能还想订阅他们：
{{#needAdBadge}} 广告{{/needAdBadge}}
&正在加载...
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制