前端必知必会- jQuery效果 – 隐藏显示和淡入淡出

文章目录

• jQuery 效果 – 隐藏和显示
• • jQuery hide() 和 show()
  • jQuery toggle()
• jQuery 效果 – 淡入淡出
• • jQuery fadeIn() 方法
  • jQuery fadeOut() 方法
  • jQuery fadeToggle() 方法
  • jQuery fadeTo() 方法
• 总结

jQuery 效果 – 隐藏和显示

jQuery hide() 和 show()

使用 jQuery，您可以使用 hide() 和 show() 方法隐藏和显示 HTML 元素：

示例

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可选的 speed 参数指定隐藏 / 显示的速度，可以采用以下值：“slow”、“fast”或毫秒。

可选的回调参数是在 hide() 或 show() 方法完成后执行的函数

以下示例演示了 hide() 的 speed 参数：

示例

$("button").click(function(){
$("p").hide(1000);
});

jQuery toggle()

您还可以使用 toggle() 方法在隐藏和显示元素之间切换。

显示的元素被隐藏，隐藏的元素被显示：

示例

$("button").click(function(){
$("p").toggle();
});

语法：

$(selector).toggle(speed,callback);
可选的 speed 参数可以采用以下值：“slow”、“fast”或毫秒。

可选的回调参数是在 toggle() 完成后执行的函数。

jQuery 效果 – 淡入淡出

使用 jQuery，您可以使元素淡入淡出。
jQuery 具有以下淡入淡出方法：

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 方法用于淡入隐藏元素。

语法：

$(selector).fadeIn(speed,callback);
可选的 speed 参数指定效果的持续时间。它可以采用以下值：“slow”、“fast”或毫秒。

可选的回调参数是淡入淡出完成后要执行的函数。

以下示例演示了具有不同参数的 fadeIn() 方法：

示例

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

$(selector).fadeOut(speed,callback);
可选的 speed 参数指定效果的持续时间。它可以采用以下值：“slow”、“fast”或毫秒。

可选的回调参数是淡入淡出完成后要执行的函数。

以下示例演示了具有不同参数的 fadeOut() 方法：

示例

$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

如果元素淡出，fadeToggle() 将使其淡入。

如果元素淡入，fadeToggle() 将使其淡出。

语法：

$(selector).fadeToggle(speed,callback);
可选的 speed 参数指定效果的持续时间。它可以采用以下值：“slow”、“fast”或毫秒。

可选的回调参数是淡入完成后要执行的函数。

以下示例演示了具有不同参数的 fadeToggle() 方法：

示例

$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许淡入到给定的不透明度（0 到 1 之间的值）。

语法：

$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数指定效果的持续时间。它可以采用以下值：“slow”、“fast”或毫秒。

fadeTo() 方法中必需的 opacity 参数指定淡入到给定的不透明度（0 到 1 之间的值）。

可选的回调参数是函数完成后要执行的函数。

以下示例演示了具有不同参数的 fadeTo() 方法：

示例

$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});

总结

本文介绍了 jQuery 效果 – 隐藏显示和淡入淡出的使用，如有问题欢迎私信和评论