基础-动画篇
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('<div>Animation complete.</div>');
}
}
);
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对象,