文章目录
- 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效果 - 隐藏\显示和淡入淡出的使用，如有问题欢迎私信和评论
