来给大家分享一下“JQuery实现DIV其他动画效果的简单实例”的攻略吧。

概述

jQuery是目前最流行的JavaScript框架之一，其中一个强大的功能就是可以通过操作DOM元素来实现各种各样的动画效果。

基本语法

jQuery中的动画基本语法是：$(selector).animate({params},speed,callback);

其中，selector表示需要操作的DOM元素，params是一个对象，表示需要进行动画的属性和值，比如{height:'200px'}表示将元素的高度从当前值渐变到200像素。speed表示动画的速度，可选值有slow、normal、fast或者是毫秒数，callback表示动画完成后需要执行的回调函数。

常见动画效果

以下是一些常见的动画效果：

滑动

可以实现元素的上下左右滑动。示例代码如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").slideDown();
    $("#div2").slideUp("slow");
    $("#div3").toggle(3000);
  });
});

淡入淡出

可以实现元素的逐渐显示、隐藏。示例代码如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut("slow");
    $("#div3").fadeToggle(3000);
  });
});

动态改变元素属性

可以实现元素宽度、高度、颜色等属性的动态改变。示例代码如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").animate({left: '250px'});
    $("#div2").animate({height: 'toggle'});
    $("#div3").animate({width: '200px'});
    $("#div3").animate({fontSize: '3em'});
  });
});

实例

下面我们来看两个例子：

实例一：实现一个抽屉效果

当用户点击一个按钮时，一个下拉框就会从上方缓慢出现。当再次点击该按钮时，这个下拉框又会缓慢消失。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>抽屉效果</title>
    <style>
        #drawer{
            background-color: #f2f2f2;
            width: 200px;
            height: 100px;
            position: relative;
            overflow: hidden;
        }
        #drawer_content{
            position: absolute;
            top: -100px;
            width: 200px;
            height: 100px;
            background-color: #999;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-size: 32px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggle_btn").click(function(){
                $("#drawer_content").animate({top: '0px'});
            });
            $("#close_btn").click(function(){
                $("#drawer_content").animate({top: '-100px'});
            });
        });
    </script>
</head>
<body>
    <div id="drawer">
        <div id="drawer_content">下拉框</div>
        <button id="toggle_btn">展开下拉框</button>
        <button id="close_btn">关闭下拉框</button>
    </div>
</body>
</html>

在上面的代码中，我们首先定义了一个抽屉容器#drawer和一个抽屉内容#drawer_content，然后分别给它们配置样式。注意，把容器的overflow属性设置为hidden可以让内容在容器外部不可见。

接着，在页面加载完毕后运行一个匿名函数，给#toggle_btn按钮和#close_btn按钮分别绑定点击事件。当#toggle_btn被点击时，将#drawer_content的top属性从-100像素逐渐变为0，实现下拉框的打开效果。当#close_btn被点击时，将#drawer_content的top属性从0逐渐变为-100像素，实现下拉框的关闭效果。

实例二：实现一个弹出层效果

当用户点击一个按钮时，会出现一个半透明的遮罩层，遮盖住整个页面。在此基础上，还会在屏幕中间弹出一个弹出层，上面包含一些信息和交互组件。当用户点击关闭按钮时，弹出层和遮罩层都会消失。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>弹出层效果</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #mask{
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.3);
            width: 100%;
            height: 100%;
            z-index: 1000;
            display: none;
        }
        #dialog{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
            width: 400px;
            height: 300px;
            z-index: 1001;
            display: none;
        }
        #dialog h2{
            margin: 20px;
            font-size: 24px;
            text-align: center;
        }
        #dialog p{
            margin: 20px;
            font-size: 16px;
            line-height: 1.5;
            text-align: justify;
        }
        #dialog button{
            margin: 20px;
            padding: 10px 30px;
            background-color: #999;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 20px;
            cursor: pointer;
            float: right;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#open_btn").click(function(){
                $("#mask").fadeIn();
                $("#dialog").fadeIn();
            });
            $("#close_btn").click(function(){
                $("#mask").fadeOut();
                $("#dialog").fadeOut();
            });
        });
    </script>
</head>
<body>
    <div id="mask"></div>
    <div id="dialog">
        <h2>标题</h2>
        <p>提示信息</p>
        <button id="close_btn">关闭</button>
    </div>
    <button id="open_btn">打开弹出层</button>
</body>
</html>

在上面的代码中，我们首先定义了一个半透明的遮罩层#mask和一个弹出层#dialog，然后分别给它们配置样式。需要注意的是，要将它们的display属性设置为none，让它们一开始不可见。

接着，在页面加载完毕后运行一个匿名函数，给#open_btn按钮和#close_btn按钮分别绑定点击事件。当#open_btn按钮被点击时，将#mask和#dialog的展示效果通过fadeIn()函数实现。当#close_btn被点击时，将#mask和#dialog的隐藏效果通过fadeOut()函数实现。

总结

通过上面的实例，我们可以看到，使用jQuery可以非常方便地实现各种各样的动画效果，甚至可以实现一些炫酷的效果。掌握好基本语法，重点掌握常见动画效果，相信您也可以轻松实现自己的动画效果了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery实现DIV其他动画效果的简单实例 - Python技术站

JQuery实现DIV其他动画效果的简单实例

概述