JQ笔记4-动画

blog12138

于 2020-11-28 17:06:42 发布

阅读量135

点赞数

分类专栏： JQ 文章标签： JQ jquery

本文链接：https://blog.csdn.net/Zzzpiu/article/details/109676243

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1.show()和hide()和toggle()
二、其它效果
三、animate()自定义动画:

1.show()和hide()和toggle()

show()显示方法中可以写参数:参数类型:1.数字类型,2字符串类型
1 数字类型:1000表示的是毫秒 —1秒
2 字符串类型: “slow” “normal” “fast”
hide()隐藏方法中可以写参数:参数类型:1.数字类型,2字符串类型
1 数字类型:1000表示的是毫秒 —1秒
2 字符串类型: “slow” “normal” “fast”
toggle()显隐切换方法中可以写参数:参数类型:1.数字类型,2字符串类型
1 数字类型:1000表示的是毫秒 —1秒
2 字符串类型: “slow” “normal” “fast”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
           //点击按钮隐藏div
           $("#btnHide").click(function () {
               // $('#dv').hide();
               //hide方法中可以写参数:参数类型:1.数字类型,2字符串类型
               //1数字类型:1000表示的是毫秒  ---1秒
               //2字符串类型: "slow"  "normal"  "fast"
               $("#dv").hide(1000);
           }) ;
           //点击按钮显示div
            $('#btnShow').click(function () {
                // $('#dv').show();
                //show方法中可以写参数:参数类型:1.数字类型,2字符串类型
                //1数字类型:1000表示的是毫秒  ---1秒
                //2字符串类型: "slow"  "normal"  "fast"
                // $("#dv").show(1000);
                $("#dv").show('fast');
            });
            $('#btnToggle').click(function () {
                // $('#dv').toggle();
                //show方法中可以写参数:参数类型:1.数字类型,2字符串类型
                //1数字类型:1000表示的是毫秒  ---1秒
                //2字符串类型: "slow"  "normal"  "fast"
                // $("#dv").toggle(1000);
                $("#dv").toggle('fast');
            });
        });
    </script>
</head>
<body>
<input type="button" value="隐藏" id="btnHide"/>
<input type="button" value="显示" id="btnShow"/>
<input type="button" value="切换" id="btnToggle"/>
<div id="dv"></div>
</body>
</html>

二、其它效果

滑动:
1.1 滑入显示:slideDown()
1.2 滑出隐藏slideUp()
1.3 滑入画出切换:slideToggle()
淡入:
2.1 淡入显示: fadeIn()
2.2 淡出隐藏:fadeOut()
2.3 淡入淡出fadeToggle()

以上的效果使用方式和一中的基本一致.

三、animate()自定义动画:

值得注意的是:animate()方法中的参数对象中使用display是无效的,可以使用透明度来实现显隐的控制.
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //获取div,产生动画效果
                //animate方法；
                /*
                * 参数:
                * 1.是键值对---对象
                * 2.时间---1000毫秒---1秒
                * 3.匿名函数---回调函数
                *
                * */
                $("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
                    $("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
                });
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>