web基础学习笔记(二十)之jquery动画操作

最新推荐文章于 2021-07-26 01:14:05 发布

weixin_44014196

最新推荐文章于 2021-07-26 01:14:05 发布

阅读量149

点赞数

分类专栏： web学习文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44014196/article/details/108893494

版权

web学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <script src="jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //显示
            $("#btn1").click(function () {
                $("#div1").show(1000,function () {
                    alert("show动画完成")
                });   /*可以加时间和回调函数*/
            });
            //隐藏
            $("#btn2").click(function () {
                $("#div1").hide();
            });
            //切换
            $("#btn3").click(function () {
                $("#div1").toggle();
            });

            /*
            循环进行动画
            var abc = function(){
                $("#div1").toggle(1000,abc);
            };
            abc();*/

            //淡入
            $("#btn4").click(function () {
                $("#div1").fadeIn();
            });
            //淡出
            $("#btn5").click(function () {
                $("#div1").fadeOut(2000);  /*2000ms  可加时间和函数 同上*/
            });
            //淡化到
            $("#btn6").click(function () {
                $("#div1").fadeTo(1000,0.5,function () {
                    alert("变半透明");
                });
            });
            //淡化切换
            $("#btn7").click(function () {
                $("#div1").fadeToggle()
            });
        });
    </script>
</head>
<body>
    <!--jquery动画操作

    基本动画:
        show()将隐藏的元素显示
        hide()将可见的元素隐藏
        toggle()可见就隐藏不可见就显示
    动画效果:
        slideDown()
        slideUp()
        slideToggle()
        fadeIn()淡入
        fadeOut()淡出
        fadeTo()淡化到     在指定的时长内慢慢将透明度修改到指定的位置，0透明  1完全可见   0.5半透明
        fade TOggle()淡化切换-->
    <table style="...">
        <tr>
            <td><button id="btn1">显示show()</button> </td>
        </tr>
        <tr>
            <td><button id="btn2">隐藏hide()</button> </td>
        </tr>
        <tr>
            <td><button id="btn3">显示/隐藏切换toggle()</button> </td>
        </tr>
        <tr>
            <td><button id="btn4">淡入fadeIn()</button> </td>
        </tr>
        <tr>
            <td><button id="btn5">淡出fadeOut()</button> </td>
        </tr>
        <tr>
            <td><button id="btn6">淡化到fadeTo()</button> </td>
        </tr>
        <tr>
            <td><button id="btn7">淡化切换fadeToggle()</button> </td>
        </tr>
        <div id="div1" >
            jquery动画定义了很多动画效果，可以很方便的使用这些动画效果
        </div>
    </table>
</body>
</html>

weixin_44014196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web基础学习笔记(二十)之jquery动画操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"> <script src="jquery/jquery-3.5.1.js"></script&gt
复制链接

扫一扫