jQuery基础_动画
来源:互联网 发布:aws s3 上传文件 php 编辑:程序博客网 时间:2024/05/21 14:51
1.hide方法
jQuery.hide()无参数会让元素直接不见,若带参数,就会变为一个宽高透明度不断减少直至0的动画,最后元素将不再影响布局。
下面分别为快捷参数和自定义设置:
$("#a1").hide("slow");//hide(“fast”),fast=200ms,slow=600ms
$("#a1").hide(5000);
$("#a2").hide({ duration: 3000, //3s complete: function() { alert('执行3000ms动画完毕')//执行完毕函数参数 } }); //也可简写,看下面,类似
对应有show方法,用法一样,例如:
$().hide(3000).show(3000),若是用button的click触发,可能在动画过程中点击会不断触发,就像排队一样。可以用stop().hide().show()
2.集hide、show一身的toggle()方法
无参情况:隐藏变显示,显示变隐藏。
$(".right").toggle({ duration:3000, complete:function(){ alert("as"); } })
$(".right").toggle(3000,function(){ alert("as"); }); //简写
$(".left").toggle(3000)
3.上、下拉动画
slidedown,slideup用法同上。
还有集于一身的slideToggle方法。
4.淡出、入动画
用法类似,有参无参,回调函数都可以,还有便捷参数fast,slow。(fast=200,slow=600,默认400)
还有linear:线性淡出,swing:先快后慢
$("p").fadeOut(1000, "swing");
还有淡入动画fadeIn,集于一身的fadeToggle()
此外,fadeOut和fadeIn都是透明度0-1变化,最后不影响布局,还有指定终点的fadeTo,同样集于一身:
$("p").fadeTo("slow", 0.5);opacity=0.5为终点
$("p").fadeTo(1000, 0.2);
$("p").fadeTo(1000, 0.9, function() { alert('完成') });
5.更强大的自定义动画
$aaron.animate({ fontSize: "5em" }, 2000,"swing", function() { alert("动画 fontSize执行完毕!"); });
也就是({参数名:“终点”,...},延迟时间,swing or linear,回调函数);
还有些可行设置,比如:
width : "+=100px"在第一个参数中这么写代表现有width加100
width: "toggle"显示,隐藏操作,等同于整体display:none、block
也可以将后面的参数用{}包含起来:
$('#elem').animate({ width: 'toggle', height: 'toggle' }, { duration: 5000, specialEasing: { width: 'linear', height: 'easeOutBounce' }, complete: function() { $(this).after('<div>Animation complete.</div>'); } });
除了complete,还有step:每个动画每一步后都执行函数,progress:每次动画调用时执行函数,例子:
step参数是(当前属性值,当前属性对象)
$aaron.animate({ height: '50' }, { duration :2000, //每一个动画都会调用 step: function(now, fx) { //now回传了height值 $aaron.text('高度的改变值:'+now) } })
progress参数是(当前对象,进度0-1,还需时间ms),可直接用arguments[]调用,0-2。
$aaron.animate({ height: '50' }, { duration :2000, //每一步动画完成后调用的一个函数, //无论动画属性有多少,每个动画元素都执行单独的函数 progress: function(now, fx,xx) { $aaron.text('进度:'+xx) } })
6.停止动画
stop()停止当前动画,其他动画同步继续
stop(true)停止所有动画
stop(true,true)停止所有动画,当前动画直接到终点
7.each方法
$.each(["WTF", "百度"], function(index, value) { //index是索引,也就是数组的索引 //value就是数组中的值了});
例子:
$.each(['Aaron', '慕课网'], function(i, item) { $aaron.append("索引=" + i + "; 元素=" + item); });
$.each({ name: "张三", age: 18 }, function(property, value) { $aaron.append("属性名=" + property + "; 属性值=" + value); });
注意function第一个参数是key、索引,第二个是值。
8.数组索引方法
$.inArray('Aaron',['test','Aaron', 'array','慕课网']); 返回1
三参数,第三个参数为查找起始索引
$.inArray('a',['a','b','c','d','a','c'],5); 返回-1
9.trim方法
用于去除字符串开始于结尾处的所有换行符、空格(连续空格)和制表符tab,字符串中间的空白字符不会被移除
10.get方法
比如,有一串a对象,通过get返回DOM对象:
<div id="aaron"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a></div>
$("#aaron a").get(1).style.color="#ccc" //第二个a ,0,1,2,
$aaron.get(-1);//最后一个a ,-1,-2,
11.获取索引的index方法
返回在指定对象中的索引,例子
没有参数,就返回同辈元素中的索引。
若有参数,DOM或jQuery对象,则返回在指定jQuery对象中的索引。
<ul> <a></a> <a></a> <li id="test1">1</li> <li id="test2">2</li> <li id="test3">3</li> </ul> <ul> <li id="test4">4</li> <li id="test5">5</li> <li id="test6">6</li> </ul>
$("li").index() 返回2
$("li").index(document.getElementById("test5"))返回4
$("li").index($("#test6"))返回5
- jQuery基础_动画
- jQuery动画基础
- jQuery基础-动画篇
- jQuery动画基础
- jQuery基础(四、动画)
- jQuery基础_事件
- Jquery基础_点击按钮使div背景变色_根据class_根据标签_所有都变色_一直动画_实例(二)
- JQuery基础之(七)jQuery动画处理
- CSS3 基础(007_动画)
- jQuery基础 第二课 jQuery动画 jQuery事件
- jQuery基础之五 -- 动画效果
- Jquery基础知识点及个别动画效果
- jquery基础(7)动画特效
- jquery基础学习之动画效果
- jQuery基础——动画篇
- jQuery之动画基础隐藏和显示
- jQuery基础篇(四)动画
- jQuery基础(四)—动画篇
- 杭电2036——改革春风吹满地(Java)
- dbname..tablename === dbname.dbo.tbname
- Android Studio系列教程四--Gradle基础
- 204. Count Primes
- public,private,protected的区别,继承方法与访问权限
- jQuery基础_动画
- 深入剖析Java中的装箱和拆箱
- VS界面绘制双缓存
- Linux学习总结(22)——CentOS7.2安装Nginx
- Eclipse 集成ijkplayer demo
- amber中非标准氨基酸残基的参数生成
- mysql update 等值 锁区间
- HTTP状态码大全
- listview回到顶部