jQuery快速入门基础教程之效果（三）

问题：我怎么才能收到你们公众号平台的推送文章呢？
答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。hide(), show()可以使用 hide() 和 show() 方法来

隐藏和显示

元素格式：$(selector).hide(speed,callback)
$(selector).show(speed,callback)其中speed为可选，表示隐藏/显示的

速度

，可以取值：“slow”,"fast"或者毫秒。其中callback参数也是可选的，表示隐藏/显示

完成后

所执行的函数名称。例子：//点击button后，在1000毫秒内，隐藏所
有p标签
$("button").click(function(){
$("p").hide(1000);
});

//点击button后，在1000毫秒内，显示
所有p标签，并且弹出"已显示"
$("button").click(function(){
$("p").show(1000,function(){
alert("已显示！");
});
});-fadeIn(), fadeOut()fadeIn() 用于

淡入已隐藏

的元素fadeOut() 方法用于

淡出可见

元素。格式：$(selector).fadeIn(speed,callback)其中speed为可选，表示淡入效果的

时长

，可以取值：“slow”,"fast"或者毫秒。其中callback参数也是可选的，表示淡入效果

完成后

所执行的函数名称。格式：$(selector).fadeOut(speed,callback)其中speed为可选，表示淡出效果的

时长

，可以取值：“slow”,"fast"或者毫秒。其中callback参数也是可选的，表示淡出效果

完成后

所执行的函数名称。例子：// 点击button后，id为div3的元素在3000毫秒内淡入
$("button").click(function(){
$("#div3").fadeIn(3000);
});

// 点击button后，id为div2的元素在3000
毫秒内淡出，
并且淡出后弹出
"fadeOut"
$("button").click(function(){
$("#div2").fadeOut("3000"，
function(){
alert("fadeOut");
});
});slideDown(), slideUp()slideDown() 方法用于

向下

滑动元素。slideUp() 方法用于

向上

滑动元素。格式：$(selector).slideDown
(speed,callback)其中speed为可选，表示

向下

滑动效果的

时长

，可以取值：“slow”,"fast"或者毫秒。其中callback参数也是可选的，表示滑动效果

完成后

所执行的函数名称。格式：$(selector).slideUp(speed,callback)其中speed为可选，表示

向上

滑动效果的

时长

，可以取值：“slow”,"fast"或者毫秒。其中callback参数也是可选的，表示滑动效果

完成后

所执行的函数名称。例子：//点击button后，在1000
毫秒内，隐藏所有p标签
$("button").click(function(){
$("p").hide(1000);
});

//点击button后，在1000毫秒内，显示所有p标签，
并且弹出"已显示"
$("button")
.click(function(){
$("p").show(1000,function(){
alert("已显示！");
});
});animate()animate() 方法用于创建

自定义动画

。格式：$(selector).animate
({params},speed,callback)params 参数定义形成动画的

CSS

属性。speed 参数为可选，表示效果的

时长

。它可以取以下值："slow"、"fast" 或毫秒。callback参数为可选，表示动画

完成后

所执行的函数名称。例子：//点击button后，
把div元素移动到左边，
直到left属性等于250px为止；
$("button")
.click(function(){
$("div")
.animate({left:'250px'});
});
操作多个属性//点击button后，
把div元素移动到左边，
直到left属性等于250px为止，
//透明度变成0.5，
且高度宽度都变成150px；
$("button")
.click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});-
stop()stop() 方法用于

停止

动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括

滑动、淡入淡出和自定义动画

。格式：$(selector).stop(stopAll,goToEnd)stopAll参数为可选，表示是否

清除动画队列

。默认是false,即

仅停止活动

的动画，允许任何排入队列的动画向后执行。goToEnd参数为可选，表示是否

立即完成

当前动画。默认是false。例子：//点击id为flip元素时，
id为panel元素向下滑动,
持续时间为5000;
$("#flip").click(function(){
$("#panel").slideDown(5000);
});

//点击id为stop元素，
id为panel元素的向下滑动效果立刻停止
$("#stop").click(function(){
$("#panel").stop();
});关注我们