jQuery——动画的相关方法

最新推荐文章于 2024-10-10 10:30:00 发布

mintsolace

最新推荐文章于 2024-10-10 10:30:00 发布

阅读量102

点赞数

分类专栏：学习笔记 jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/mintsolace/article/details/97966596

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

jQuery

16 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中用于创建动画效果的方法，包括show/hide、slideDown/slideUp/slideToggle以及fadeIn/fadeOut/fadeToggle/fadeTo。详细阐述了它们的参数用法，如时间设置和回调函数，并提供了动画执行的示例。

摘要由CSDN通过智能技术生成

show和hide
参数：1.时间：1000毫秒——1秒；2.回调函数——动画执行完毕后才执行

    <style>
        div{
            width:300px;
            height:200px;
            background-color:mediumvioletred;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            //点击第一个按钮显示div
            $("btn1").click(function(){
                $("dv").show(400);
            });
            //点击第二个按钮显示div
            $("#btn2").click(function(){
                $("#dv").hide(400);
            });
        });
    </script>
......
	<input type="button" value="显示" id="btn1" />
	<input type="button" value="隐藏" id="btn2" />
	<div id="dv"></div>

slideDown()滑出；slideUp()滑入；slideToggle()切换滑入和滑出

    <script>
        $(function(){
            //点击第一个按钮显示div
            $("#btn1").click(function(){
                $("#dv").slideDown(500, function(){
                    alert("显示");
                });//滑出
            });
            //点击第二个按钮隐藏div
            $("#btn2").click(function(){
                $("#dv").slideUp(500, function(){
                    alert("隐藏");
                });//滑入
            });
            //第三个按钮——切换效果
            $("#btn3").click(function(){
                $("#dv").slideToggle(500);
            });
        });
    </script>

fadeIn | fadeOut | fadeToggle | fadeTo(透明值开始，透明值结束)

    <script>
        $(function(){
            //点击第一个按钮显示div
            $("#btn1").click(function(){
                $("#dv").fadeIn(1000);//淡入
            });
            //点击第二个按钮隐藏div
            $("#btn2").click(function(){
                $("#dv").fadeOut(1000);//淡出
            });//滑入
            //第三个按钮
            $("#btn3").click(function(){
                $("#dv").fadeToggle(1000);//切换淡入和淡出
            });
        });
    </script>

动画的方法演示

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("#im").animate({"width":"300px","height":"300px","left":"100px","top":"100px"},3000).animate({
                "width":"30px","height":"30px","left":"10px","top":"600px"},300).animate
            ({"width":"50px","height":"50px","left":"800px","top":"20px","opacity":"0.5"},2000);
        });
    </script>
</head>
......
<img src="images/1.png" alt="" id="im" />