09-jQuery-动画-显示和隐藏元素




$(document).ready(function() {
    // 当点击“显示”按钮时
    $("#show").click(function() {
        // 使用fadeIn()方法以淡入效果显示元素
        $("#div1").fadeIn();
    });
 
    // 当点击“隐藏”按钮时
    $("#hide").click(function() {
        // 使用fadeOut()方法以淡出效果隐藏元素
        $("#div1").fadeOut();
    });
 
    // 当点击“切换”按钮时
    $("#toggle").click(function() {
        // 使用fadeToggle()方法以淡入或淡出效果切换元素的可见状态
        $("#div1").fadeToggle();
    });
});

这段代码使用了jQuery的fadeIn(), fadeOut(), 和 fadeToggle() 方法来控制一个ID为div1的元素的淡入、淡出以及切换可见状态。这些方法提供了平滑的动画效果，使页面的更新更加引人入胜。

09-jQuery-动画-显示和隐藏元素

评论已关闭

推荐阅读