1. .fadeIn() 方法:
.fadeIn() 方法用于淡入显示被选元素。
// 淡入显示所有段落元素
$("p").fadeIn();
可以传递参数来指定淡入的速度:
// 在2000毫秒(2秒)内淡入显示所有段落元素
$("p").fadeIn(2000);
2. .fadeOut() 方法:
.fadeOut() 方法用于淡出隐藏被选元素。
// 淡出隐藏所有段落元素
$("p").fadeOut();
也可以传递参数来指定淡出的速度:
// 在1000毫秒(1秒)内淡出隐藏所有段落元素
$("p").fadeOut(1000);
3. .fadeToggle() 方法:
.fadeToggle() 方法用于在淡入和淡出之间切换元素的可见性。
// 在段落元素的淡入和淡出之间切换
$("p").fadeToggle();
同样,可以传递速度参数。
// 在500毫秒(0.5秒)内淡入和淡出切换显示状态
$("p").fadeToggle(500);
4. 自定义淡入淡出效果:
如果你想要更灵活地控制淡入淡出效果,可以使用 .animate() 方法来执行自定义动画。
// 自定义淡入效果
$("div").animate({ opacity: 1 }, 1000);
// 自定义淡出效果
$("div").animate({ opacity: 0 }, 1000);
在这里,opacity 属性被用于控制元素的透明度,值从0到1,0表示完全透明,1表示完全不透明。.animate() 方法的第二个参数表示动画的持续时间。
通过这些方法,你可以实现页面元素的平滑淡入淡出效果,提升用户体验。
转载请注明出处:http://www.pingtaimeng.com/article/detail/4611/jQuery