jQuery相关方法3----动画相关

限于喜欢 提交于 2020-01-24 06:57:08

一、显示和隐藏

  • show(参数1,参数2)方法和hide(参数1,参数2)方法,动画效果显示和隐藏
  • 参数1是时间,单位毫秒(1000毫秒=1秒),也可以是 "slow""normal""fast"
  • 参数2是回调函数,在动画执行完以后再执行
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#dv").show(1000,function(){
                    console.log("显示完了");
                });
            });
            $("#btn2").click(function(){
                $("#dv").hide(1000,function(){
                    console.log("隐藏完了");
                });
            });
        });
    </script>
    <input type="button" value="显示" id="btn1">
    <input type="button" value="隐藏" id="btn2">
    <div id="dv" style="width: 200px;height: 200px;background: red;"></div>

二、滑入和滑出

  • slideDown(参数1,参数2)方法和slideUp(参数1,参数2)方法,动画滑入和滑出
  • slideToggle(参数1,参数2)方法是切换滑入和滑出
  • 参数1是时间,单位毫秒(1000毫秒=1秒),也可以是 "slow""normal""fast"
  • 参数2是回调函数,在动画执行完以后再执行
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#dv").slideDown(1000,function(){
                    console.log("滑入完了");
                });
            });
            $("#btn2").click(function(){
                $("#dv").slideUp(1000,function(){
                    console.log("滑出完了");
                });
            });
            $("#btn3").click(function(){
                $("#dv").slideToggle(1000,function(){
                    alert("完成了");
                });
            });
        });
    </script>
    <input type="button" value="滑入" id="btn1">
    <input type="button" value="滑出" id="btn2">
    <input type="button" value="滑入/出" id="btn3">
    <div id="dv" style="width: 200px;height: 200px;background: red;"></div>

三、淡入和淡出

  • fadeIn(参数1,参数2)方法和fadeOut(参数1,参数2)方法,动画淡入和淡出
  • fadeToggle(参数1,参数2)方法是切换淡入和淡出
  • 参数1是时间,单位毫秒(1000毫秒=1秒),也可以是 "slow""normal""fast"
  • 参数2是回调函数,在动画执行完以后再执行
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#dv").fadeIn(1000,function(){
                    console.log("淡入完了");
                });
            });
            $("#btn2").click(function(){
                $("#dv").fadeOut(1000,function(){
                    console.log("淡出完了");
                });
            });
            $("#btn3").click(function(){
                $("#dv").fadeToggle(1000,function(){
                    console.log("完成了");
                });
            });
        });
    </script>
    <input type="button" value="淡入" id="btn1">
    <input type="button" value="淡出" id="btn2">
    <input type="button" value="淡入/出" id="btn3">
    <div id="dv" style="width: 200px;height: 200px;background: red;"></div>

四、案例

  • 点击图片图片显示和隐藏
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("img").click(function(){
                $(this).hide(300);
            });
        });
    </script>
    <img src="img.jpg" alt="" style="vertical-align: top">
    <img src="img.jpg" alt="" style="vertical-align: top">
    <img src="img.jpg" alt="" style="vertical-align: top">
    <img src="img.jpg" alt="" style="vertical-align: top">

  • 点击按钮连续动画
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //显示
            $("#btn1").click(function(){
                $("div>img:last").hide(300,function f1(){
                    $(this).prev().hide(300,f1);
                });
            });
            //隐藏
            $("#btn2").click(function(){
                $("div>img:first").show(300,function f2(){
                    $(this).next().show(300,f2);
                });
            });
        });
    </script>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <div>
        <img src="img.jpg" alt="" style="vertical-align: top">
        <img src="img.jpg" alt="" style="vertical-align: top">
        <img src="img.jpg" alt="" style="vertical-align: top">
        <img src="img.jpg" alt="" style="vertical-align: top">
    </div>

五、animate()方法

  • animate(参数1,参数2,参数3)方法,动画效果
  • 参数1,json键值对----css属性和值
  • 参数2,时间,单位毫秒
  • 参数3,回调函数
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("img").animate({"width":"100px","height":"100px"},1000).animate({"left":"100px","top":"100px"},1000).animate({"opacity":0.5},1000);
        });
    </script>
    <img src="img.jpg" alt="" style="position: absolute;">

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!