jQuery8：动画效果

8，基本动画效果

注意：这些方法可能不会提示，需要自己添加

1）基本

show(speed，fn) ：显示

hide(speed，fn) ：隐藏

注意：speed：slow|normal|fast |时间单位毫秒

              Fn:回调函数，当动画执行完成之后，自动调用该函数，也可以省略。

2）滑动：

slideDown(speed，fn)  ：显示

slideUp(speed，fn)  ：隐藏

3）淡入淡出：通过改变标签的不透明度来实现

fadeIn(speed，fn)  ：显示

fadeOut(speed，fn)  ：隐藏

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){   /* 基本动画效果，慢慢滑动收缩+慢慢变淡*/
                    $("img").show(3000,);
                });
                $("#btn2").click(function(){
                    $("img").hide(3000);
                });
                $("#btn3").click(function(){  /* 滑动效果，不会慢慢变淡*/
                    $("img").slideDown(5000);
                });
                $("#btn4").click(function(){
                    $("img").slideUp(5000);
                });
                $("#btn5").click(function(){  /* 淡入淡出效果，不会滑动，只通过改变标签的透明度来改变*/
                    $("img").fadeIn(5000);
                });
                $("#btn6").click(function(){
                    $("img").fadeOut(5000);
                });
            });
        </script>
    </head>
    <body>
        <div id="div1">
            <img id="img1" src="img/1.jpg">
        </div>
        <input type="button" name="btn1" id="btn1" value="基本显示" />
        <input type="button" name="btn2" id="btn2" value="基本隐藏" />
        <input type="button" name="btn3" id="btn3" value="滑动显示" />
        <input type="button" name="btn4" id="btn4" value="滑动隐藏" />
        <input type="button" name="btn5" id="btn5" value="淡入淡出显示" />
        <input type="button" name="btn6" id="btn6" value="淡入淡出隐藏" />
        </body>
</html>

 

 

 

posted @ 2020-11-13 17:12  云山有相逢  阅读(83)  评论(0)    收藏  举报