jquery 动画网站

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 动画是指使用 jQuery 提供的方法来创建平滑的视觉效果，如元素的淡入淡出、滑动、缩放等。

类型

基本动画：如 fadeIn(), fadeOut(), slideUp(), slideDown() 等。
自定义动画：使用 animate() 方法可以创建自定义的动画效果。
链式动画：可以将多个动画方法链接在一起，按顺序执行。

应用场景

页面加载效果：如页面元素的淡入淡出效果。
交互效果：如鼠标悬停时的元素变化。
导航效果：如菜单的展开和收起。
内容展示：如图片轮播、幻灯片等。

示例代码

以下是一个简单的 jQuery 动画示例，展示了如何使用 fadeIn() 和 fadeOut() 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 动画示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">点击我</button>
    <div id="box"></div>

    <script>
        $(document).ready(function() {
            $('#btn').click(function() {
                $('#box').fadeIn(1000, function() {
                    $(this).fadeOut(1000);
                });
            });
        });
    </script>
</body>
</html>