JQuery基础总结四:动画篇
基础-动画篇
1.jquery中隐藏元素的hide方法
$elem.hide() //直接隐藏
$elem.hide("fast | slow") // 200/600ms动画隐藏
$elem.hide(3000); 3s动画
$elem.hide( 3000,function() {
alert('执行3000ms动画完毕');
}
}); //隐藏完执行回掉函数
2.jquery中显示元素的show方法(和hide用法一样)
3.jquery中显示与隐藏切换toggle方法(切换hide()与show()方法)
4.jquery中下拉动画slidedown(改变高度,目标的display: none;才能触发)
5.jquery中上卷动画slideup
6.jquery中上卷下拉切换slidetoggle(切换slidedown()与slideup()方法)
7.jquery中淡出动画fadeout(opacity:1->0)
8.jquery中淡入动画fadein (opacity:0->1)
9.jquery中淡入淡出切换fadetoggle(切换fadein()与fadeout()方法)
10.jquery中淡入效果fadeto
执行到固定透明度
.fadeto( duration, opacity ,callback)
$("p").fadeto(1000, 0.9, function() {
alert('完成')
});
11.jquery中动画animate(上)
同时控制多种样式改变
animate(properties,[duration],[easing],[complete])
animate({
width: 数值|"+=100px"|"hide"|"show"|"toggole",
fontsize: xxxxxx
},1000,function(){ // code });
12.jquery中动画animate(下)
显示或者控制其中某一时刻
animate(properties.options);
options:
duration, 执行动画的时间
easing, 过渡缓动函数
step, 每一步完成后要执行的函数
progress, 每一次动画调用的时候会执行的回掉,类似进度的概念
complete 动画完成回掉
常用方式:
$('#elem').animate(
{
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialeasing: {
width: 'linear',
height: 'easeoutbounce'},
step: function(now, fx) { //改变值
$aaron.text('高度的改变值:'+':'+now)
},
progress: function(now, fx) { //进度
$aaron.text('进度:'+arguments[1])
// var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
// alert(data)
},
complete: function() {
$(this).after('<p>animation complete.</p>');}
}
);
13.jquery中停止动画stop
1. stop() 停止当前动画
2. stop(true) 停止当前执行动画元素的所有动画行为
3. stop(true,true) 停止当前执行动画元素的所有动画行为,并且直接到达动画最后一帧
14.jquery中each方法的应用
<script type="text/javascript">
var obj = {"name":"lucy","age":12,"job":"student"};
$.each(obj,function(index,value){
console.log(index+":"+value);
});
</script>
15.jquery中查找数组中的索引inarray
$.inarray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4
判断是否存在,则返回值是否大于-1
16.jquery中去空格神器trim方法
jquery.trim()函数用于去除字符串两端的空白字符
$.trim($item);
17.jquery中dom元素的获取get方法
get方法是通过已知的索引在合集中找到对应的元素
get是获取的dom对象,eq是获取的jq对象
18.jquery中dom元素的获取index方法
.index()方法
,从匹配的元素中搜索给定元素的索引值,从0开始计数。
.index() 如果不传递任何参数给 .index() 方法,则返回值就是jquery对象中第一个元素相对于它同辈元素的位置
.index(selector) 如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1
.index(element) 如果在一组元素上调用 .index() ,并且参数是一个dom元素或jquery对象,