jQuery学习：内置动画 淡出/淡入 展开/收缩 显示/隐藏

$(document).ready(function() {
    // 淡出动画
    $("#fadeOutButton").click(function() {
        $("#box").fadeOut(1000); // 1000毫秒内淡出
    });
 
    // 淡入动画
    $("#fadeInButton").click(function() {
        $("#box").fadeIn(1000); // 1000毫秒内淡入
    });
 
    // 展开动画
    $("#slideDownButton").click(function() {
        $("#box").slideDown(1000); // 1000毫秒内展开
    });
 
    // 折叠动画
    $("#slideUpButton").click(function() {
        $("#box").slideUp(1000); // 1000毫秒内折叠
    });
 
    // 显示动画
    $("#showButton").click(function() {
        $("#box").show(1000); // 1000毫秒内显示
    });
 
    // 隐藏动画
    $("#hideButton").click(function() {
        $("#box").hide(1000); // 1000毫秒内隐藏
    });
});

这段代码为jQuery内置的淡出、淡入、展开、折叠、显示和隐藏动画提供了简单的实例。每个函数都通过一个ID选择器绑定到一个按钮的点击事件上，并在点击时触发对应的动画。动画时长设置为1000毫秒。