浅谈jQuery——jQuery基本动画效果

最新推荐文章于 2020-05-05 23:25:12 发布

追夢秋陽

最新推荐文章于 2020-05-05 23:25:12 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： jquery javascript 动画 xhtml

本文链接：https://blog.csdn.net/yimiyuangguang/article/details/17840163

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浅谈jQuery——jQuery基本动画效果

jQuery基本动画效果学习案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery——动画</title>
    <style type="text/css">
        .div_main
        {
            width: 100%;
            height: 100%;
        }
        .divOne
        {
            width: 800px;
            height: 400px;
            margin: 20px;
            position: relative;
            border: solid 5px rgb(230, 235, 236);
            background-color: rgb(136, 116, 116);
        }
        .mytest_One
        {
            width: 150px;
            height: 50px;
            left: 50%;
            top: 45%;
            position: absolute;
            background-color: Fuchsia;
            border: solid 5px rgb(230, 235, 236);
        }
        .display
        {
            display: none;
        }
    </style>


    <script src="Script/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(function() {
            var $div = $("div .divOne");

            /*********** 隐藏/显示 ***********/
            $("#btn_one").click(function() {
                if ($div.is(":visible")) {
                    $(this).attr("title", "点击显示");
                } else {
                    $(this).attr("title", "点击隐藏");
                }
                $div.toggle(1000);

                /*
                方法二：
                if ($div.is(":visible")) {
                $div.hide(600);
                $div.attr("title", "点击显示");
                } else {
                $div.show(800);
                $div.attr("title", "点击隐藏");
                }
                */
            });


            /*********** 淡入/淡出 ***********/
            $("#btn_two").click(function() {
                /*
                方法一：
                if(fadeIn){
                $(this).attr("title","点击淡入");
                $div.fadeOut("slow");  //淡出
             
             fadeIn = false;
                }else{
                $(this).attr("title","点击淡出");
                $div.fadeIn("slow");  //淡入
             
             fadeIn = true;
                }
                */

                //方法二：
                if ($div.is(":visible")) {
                    $(this).attr("title", "点击淡入");
                } else {
                    $(this).attr("title", "点击淡出");
                }

                $div.fadeToggle(1000);
            });


            /*********** 伸展/收缩 ***********/
            $("#btn_three").click(function() {
                /*
                方法一：
                if(shenzhan){
                $(this).attr("title","点击伸展");
                $div.slideUp("slow");
          
             shenzhan = false;
                }else{
                $(this).attr("title","点击收缩");
                $div.slideDown("slow");
             
                shenzhan = true;
                }
                */

                //方法二：
                if ($div.is(":visible")) {
                    $(this).attr("title", "点击伸展");
                }
                else {
                    $(this).attr("title", "点击收缩");
                };

                $div.slideToggle(1000);
            });


            /*********** animate自定义动画 ***********/
            $("#btn_four").click(function() {
                if (!$div.is(":animated")) {
                    //是否有动画在进行，防止动画队列累加
                    $div.animate(
           {
               left: "+=50px",
               height: "-=35px",
               width: "-=70px",
               opacity: "-=0.08"   //透明度
           },
           1000                 //时间(单位：秒)  
           );
                }
            });



            /*********** 我向上飞出 ***********/
            $("#btn_five").click(function() {
                var div_Html = "<div id='mytest' class='mytest_One display'><!-- 我向上飞出 -->" +
                      "<div align='left' style='border: 1px; background-color: Gray; color: White'>title</div>" +
                       "<font color='white'>我飞了</font>" +
                      "</div>";
                $("body").append(div_Html);

                var $myDiv = $("#mytest");
                $myDiv.removeClass("display");

                if (!$myDiv.is("animated")) {
                    $myDiv.animate(
            {
                top: "-10%",
                opacity: "0"
            },
            2000,         //时间(单位:毫秒)
            function() {
                //移除元素
                $("#mytest").remove();
            }
            );
                }
            });


            /*********** 重置 ***********/
            $("input[type='reset']").click(function() {
                window.location.reload();
            });
        });
    </script>

</head>
<body>
    <div class="div_main">
        <fieldset>
            <legend>jQuery动画</legend>
            <input id="btn_one" type="button" value="隐藏/显示" title="" style="margin-left: 20px" />
            <input id="btn_two" type="button" value="淡入/淡出" title="" style="margin-left: 40px" />
            <input id="btn_three" type="button" value="伸展/收缩" title="" style="margin-left: 40px" />
            <input id="btn_four" type="button" value="animate自定义动画" title="" style="margin-left: 40px" />
            <input id="btn_five" type="button" value="向上飞出" title="" style="margin-left: 40px" />
            <input type="reset" value="重置" title="点击重置" style="margin-left: 40px" />
            <div class="divOne">
            </div>
        </fieldset>
    </div>
</body>
</html>

追夢秋陽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
浅谈jQuery——jQuery基本动画效果

浅谈jQuery——jQuery基本动画效果jQuery基本动画效果学习案例: jQuery——动画 .div_main { width: 100%; height: 100%; } .divOne {
复制链接

扫一扫