[第七季]7.实现DIV的其他动画效果

最新推荐文章于 2023-11-24 10:31:53 发布

低调的嚣张的程序员

最新推荐文章于 2023-11-24 10:31:53 发布

阅读量453

点赞数

分类专栏： 009 JQuery 001 Access VBA

本文链接：https://blog.csdn.net/zeephom/article/details/77187560

版权

001 Access VBA 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

009 JQuery

14 篇文章 0 订阅

订阅专栏

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

(1)toggle显示和隐藏
(2)用回调函数完成标签的切换,一共四个标签.
(3)向上滑动的结果
(4)向下滑动
(5)slidetoggle来切换div的隐藏与显示
(6)淡入和淡出的效果
(7)淡入效果
(8)指定透明度

5.自测代码

2.课堂笔记

1.
(1)toggle显示和隐藏
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $("#div1").toggle(1000);
        });
    });


</script>
(2)用回调函数完成标签的切换,一共四个标签.
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            if($("#div1").css("display")=="none")
            {
                msg1="正在显示...";
                msg2="显示完毕...";
            }
            else
            {
                msg1="正在隐藏...";
                msg2="隐藏完毕...";
            };
            $("#info").html(msg1);
            $("#div1").toggle(1000,function(){
                $("#info").html(msg2);
            });
        });
    });


</script>

(3)向上滑动的结果
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $("#div1").slideUp(500,function(){
                alert("向上滑动结束!");
            });
        });
    });


</script>
(4)向下滑动
<script type="text/javascript">
    $(function()
    {
        $("#div1").css("display","none");
        $("#btn").click(function()
        {
            $("#div1").slideDown(500,function()
            {
                alert("向下滑动结束");
            });
        });
    });


</script>
</head>

<body>
<input type="button" value="切换" id="btn" />
<div id="info">正在显示</div>
<div id="div1"></div>
</body>
</html>
(5)slidetoggle来切换div的隐藏与显示
<script type="text/javascript">
    $(function()
    {
        $("#btn").click(function()
        {
            $("#div1").slideToggle(500);
        });
    });


</script>
</head>

<body>
<input type="button" value="切换" id="btn" />
<div id="info">正在显示</div>
<div id="div1"></div>
</body>
</html>
(6)淡入和淡出的效果
<script type="text/javascript">
    $(function()
    {
        $("#btn").click(function()
        {
            $("#div1").fadeOut(1000);
        });
    });


</script>
(7)淡入效果
<script type="text/javascript">
    $(function()
    {
        $("#div1").css("display","none");
        $("#btn").click(function()
        {
            $("#div1").fadeIn(1000);
        });
    });


</script>
</head>

<body>
<input type="button" value="切换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>
(8)指定透明度
<script type="text/javascript">
    $(function()
    {
        //$("#div1").css("display","none");
        $("#btn").click(function()
        {
            $("#div1").fadeTo(1000,0.5);
        });
    });


</script>
</head>

<body>
<input type="button" value="切换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>