特殊效果
- fadeOut() 淡出
- fadeToggle() 切换淡入淡出
- hide() 隐藏元素
- show() 显示元素
- toggle() 依次展示或隐藏某个元素
- slideDown() 向下展开
- slideUp() 向上卷起
- slideToggle() 依次展开或卷起某个元素
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
链式调用
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数可以写成数字表达式:
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
$(function(){
/*
参数:
1、什么属性做动画,属性设置{param1: value1, param2: value2}
2、动画执行的时间,单位毫秒
3、动画曲线:
swing(默认值)开始和结束慢,中间快
linear匀速
可省略不写
4、回调函数,动画完成之后要做的事情,可无限嵌套
*/
$('#div1').animate({
width: 200,
height: 200},
1000,
function(){
// alert('动画完了!');
$(this).animate(
{marginLeft: 500},
1000,
function(){
$(this).animate(
{marginTop: 500},
1000
)
}
)
}
);
})
循环
$(function(){
// //给全部的li设置内容和样式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一个参数index是索引值
$('.list li').each(function(index) {
// alert(index);//弹出索引值
//$(this)是每一个li
$(this).html(index);
});
})
网友评论