jQuery动画

最新推荐文章于 2025-03-06 10:12:18 发布

asdasd1fdsyrt

最新推荐文章于 2025-03-06 10:12:18 发布

阅读量129

点赞数

分类专栏： # H5 & JS 前端

本文链接：https://blog.youkuaiyun.com/asdasd1fdsyrt/article/details/111478512

版权

H5 & JS 同时被 2 个专栏收录

8 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

本文介绍了使用jQuery实现的四种动画效果：对角线动画、滑动动画、淡入淡出动画及透明度动画，并提供了两个实际应用案例，包括表格隔行变色和复选框全选/全不选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery动画效果

1. 对角线动画

效果：让元素在规定时间里沿着(左上角)来回显示和隐藏
jq对象.show()    hide()    toggle()
参数 ： 括号中可以加动画时长（ slow || normal || fast || 毫秒数 ）；任一个
//fast=200ms    normal=400ms    slow=600ms  ,默认不做动画

代码

<script src="../js/jquery.min.js"></script>
<script>
        $(function () {
            var inputs = $("input");
            // 显示
            inputs.eq(0).click(function () {
                $(".box").show("slow");   // slow normal fast
            });
            // 隐藏
            inputs.eq(1).click(function () {
                $(".box").hide();
            });
            // 切换
            inputs.eq(2).click(function () {
                $(".box").toggle(1000);
            });
        });
</script>

<body>
	<input type="button" value="显示" />
	<input type="button" value="隐藏" />
	<input type="button" value="切换" />
	<div class="box">
	    <img src="../../img/11.jpg" />
	</div>
</body>

2. 滑动动画

效果：让元素在规定时间里(下拉和上拉)来回显示和隐藏
jq对象.slideDown()    slideUp()    slideToggle()
参数：如果没有参数，默认以normal（400）的速度做动画

代码

<body>
 <input type="button" value="显示" />
 <input type="button" value="隐藏" />
 <input type="button" value="切换" />
 <div class="box">
     <img src="../../img/11.jpg" />
 </div>
</body>

<script src="../js/jquery.min.js"></script>
<script>
 $(function () {
        var inputs = $("input");
        // 显示
        inputs.eq(0).click(function () {
            $(".box").slideDown("slow");   // slow normal fast
        });
        // 隐藏
        inputs.eq(1).click(function () {
            $(".box").slideUp();
        });
        // 切换
        inputs.eq(2).click(function () {
            $(".box").slideToggle(1000);
        });
    });
</script>

3. 淡入谈出动画

效果：让元素在规定时间里不断改变透明度直到显示和隐藏
jq对象.fadeIn()    fadeOut()    fadeToggle()
参数：如果没有参数，默认以normal（400）的速度做动画

代码

<body>
<input type="button" value="显示" />
<input type="button" value="隐藏" />
<input type="button" value="切换" />
<div class="box">
    <img src="../../img/2.jpg" />
</div>
</body>

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        var inputs = $("input");
        // 显示
        inputs.eq(0).click(function () {
            $(".box").fadeIn("slow");   // slow normal fast
        });
        // 隐藏
        inputs.eq(1).click(function () {
            $(".box").fadeOut();
        });
        // 切换
        inputs.eq(2).click(function () {
            $(".box").fadeToggle(1000);
        });
    });
</script>

4. 透明度动画

效果：让元素在规定时间里改变一定的透明度
jq对象.fadeTo(时间,透明度)       透明度取值0-1
可以准确的设置透明度，而且透明度最终会停留在标签身上。
注意：只是降低盒子的透明度，不是隐藏盒子

代码

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        var inputs = $("input");
        // 改变透明度
        inputs.eq(0).click(function () {
            $(".box").fadeTo(1000, 0);
        });
        // 还原透明度
        inputs.eq(1).click(function () {
            $(".box").fadeTo(1000, 1);
        });
    });
</script>

<body>
    <input type="button" value="改变透明度" />
    <input type="button" value="还原透明度" />
    <div class="box">
        <img src="../img/one.gif"/>
    </div>
</body>

5. 案例

5.1 表格隔行变色

<body>
    <table id="table" border="1" width="100%" align="center" style="text-align: center;">
        <tr>
            <td colspan="5" align="left">
                <input id="uncheckBtn" type="button" value="全不选" />
                <input id="reverseBtn" type="button" value="反选" />
            </td>
        </tr>
        <tr>
            <th>全选<input id="all" type="checkbox" /></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
    </table>
</body>

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 1. 获取 tr 标签
        $("tr:gt(1):even").css("backgroundColor", "yellow");
        $("tr:gt(1):odd").css("backgroundColor", "skyblue");
    });
</script>

在这里插入图片描述

5.2 复选框全选全不选

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        // 需求1 :全选
        $("#all").click(function () {
            // 1. 获取 all 标签的 checked 状态  (prop 方法)
            var checked = $("#all").prop("checked");
            // 2. 得到所有的 itemSelect 选项框, 状态与 checked 保持一致
            $(".itemSelect").prop("checked", checked);
        });
        // 需求2 : 全不选
        $("#uncheckBtn").click(function () {
            $(".itemSelect").prop("checked", false);
            $("#all").prop("checked", false);
        });
        // 需求3 : 反选
        $("#reverseBtn").click(function () {
            $(".itemSelect").click();
            // 1. 获取 itemSelect 的个数
            var len1 = $(".itemSelect").length;
            // 2. 获取 itemSelect 的被选中的个数
            var len2 = $(".itemSelect:checked").length;
            // alert(len1 + " : " + len2);
            // 3. 判断
            if (len1 == len2) {
                $("#all").prop("checked", true);
            } else {
                $("#all").prop("checked", false);
            }
        });
    });
</script>

<body>
    <table id="table" border="1" width="100%" align="center" style="text-align: center;">
        <tr>
            <td colspan="5" align="left">
                <input id="uncheckBtn" type="button" value="全不选" />
                <input id="reverseBtn" type="button" value="反选" />
            </td>
        </tr>
        <tr>
            <th>全选<input id="all" type="checkbox" /></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
    </table>
</body>

5.3 QQ表情添加案例

让被点击的当前图片对象实现克隆, 然后拼接到类名word标签之后

代码

<body>
<div class="emoji">
    <ul>
        <li><img src="../../img/1.jpg" height="22" width="22" alt="" /></li>
        <li><img src="../../img/11.jpg" height="22" width="22" alt="" /></li>
        <li><img src="../../img/2.jpg" height="22" width="22" alt="" /></li>
        <li><img src="../../img/22.jpg" height="22" width="22" alt="" /></li>
    </ul>
    <p class="word">
        <strong>请发言：</strong>
        <img src="../../img/11.gif" height="22" width="22" alt="" />
    </p>
</div>
</body>

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        // 1. 给所有图片绑定事件
        $("img").click(function () {
               //2. 一旦图片被点击, 需要将当前图片克隆到类名为 word 标签之后.
               //$("img") 获取的是所有的 img 标签.
               //$("img").clone().appendTo(".word");
 
            // 原因: clone() 和 appendTo 方法是 jquery 提供的, this 是 JS 对象.
            // this.clone().appendTo(".word");(不可以)
            $(this).clone().appendTo(".word");
        });
    });
</script>

在这里插入图片描述