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();             });

关注我们