jQuery_02_动画效果

最新推荐文章于 2024-05-16 10:00:15 发布

pre_eminent

最新推荐文章于 2024-05-16 10:00:15 发布

阅读量420

点赞数 2

分类专栏： # jQuery 文章标签： jQuery 动画效果

本文链接：https://blog.csdn.net/pre_eminent/article/details/79783939

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery 效果- 隐藏和显示

在 jQuery 中可以使用 hide() 和 show() 方法来瞬间隐藏和显示 HTML 元素，

以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

隐藏、显示、切换，滑动，淡入淡出，以及动画

实例

jQuery hide()
简单的jQuery hide()方法演示。

jQuery hide()
另一个hide()实例。演示如何隐藏文本。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }

        div.class_div_container {
            background-color: rgba(223,236,194,0.5);
            border:1px solid #c3c3c3;
            padding: 7px;
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        <div class="class_div_container">
            <button id="id_btn_hide" class="class_btn class_btn_green" type="button" >点我试试</button>
            <p>我们仍未知道那年夏天所见到的花的名字<br/>
            あの日見た花の名前を僕達はまだ知らない</p>
        </div>


        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_hide").click(
                    // 匿名函数
                    function() {
                        // 将父类.hide("slow")
                        $(this).parents(".class_div_container").hide("slow");
                    }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b><br/>$(".class_btn").parents(".class_div_container").hide("slow");<br/>
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

实例

     $("#id_btn_hide").click(function(){  
    
  $("p").hide();  
    
});  
    
$("#id_btn_show").click(function(){  
    
  $("p").show();  
    
});

语法:

     $( 
    selector).hide( 
    speed,callback); 
    
$( 
    selector).show( 
    speed,callback); 
   

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是隐藏或显示完成之后,所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

     $("id_btn_hide").click(function(){  
    
  $("p").hide(3000);  
    
});

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }

        div.class_div_container {
            background-color: rgba(223,236,194,0.5);
            border:1px solid #c3c3c3;
            padding: 7px;
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        <div class="class_div_container">
            <p>我们仍未知道那年夏天所见到的花的名字<br/>
            あの日見た花の名前を僕達はまだ知らない</p>
        </div>
        <button id="id_btn_toggle" class="class_btn class_btn_green" type="button" >点我试试</button>


        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_toggle").click(
                    // 匿名函数
                    function() {
                        // 将div.toggle("slow")
                        $(".class_div_container").toggle("fast");
                    }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("id_btn").toggle();显示或隐藏
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

实例

     $("button").click(function(){  
    
  $("p").toggle("fast");  
    
});

语法:

     $( 
    selector).toggle( 
    speed,callback); 
   

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

可选的 callback 参数，具有以下三点说明：

注意:

$(selector)选中的元素的个数为n个，则callback函数就会 执行n次
callback函数名后加括号的话，函数就会立刻执行，而不是等到显示/隐藏完成后才执行
callback既可以是函数名，也可以是匿名函数

jQuery 效果 - 淡入淡出

在在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：

fadeIn()、 fadeOut()、 fadeToggle() 以及 fadeTo()，

本文通过实例来为你讲解如何在jQuery中使用这四个方法。

通过 jQuery，您可以实现元素的淡入淡出效果。

实例

jQuery fadeIn()
演示 jQuery fadeIn() 方法。

jQuery fadeOut()
演示 jQuery fadeOut() 方法。

jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。

jQuery fadeTo()
演示 jQuery fadeTo() 方法。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }

        div.class_div_container {
            background-color: rgba(223,236,194,0.5);
            border:1px solid #c3c3c3;
            padding: 7px;
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        
        <button id="id_btn_fadeIn" class="class_btn class_btn_green" type="button" >fadeIn</button>
        <button id="id_btn_fadeOut" class="class_btn class_btn_green" type="button" >fadeOut</button>
        <button id="id_btn_fadeToggle" class="class_btn class_btn_green" type="button" >fadeToggle</button>
        <button id="id_btn_fadeTo" class="class_btn class_btn_green" type="button" >fadeTo</button>
        <div id="id_div_1" style="width:80px;height:80px;display:none;background-color:red;">
        </div><br/>
        <div id="id_div_2" style="width:80px;height:80px;display:none;background-color:green;">
        </div><br/>
        <div id="id_div_3" style="width:80px;height:80px;display:none;background-color:blue;">
        </div><br/>


        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_fadeIn").click(
                        function() {
                            // 不加参数,默认速度 
                            $("#id_div_1").fadeIn();
                            // 慢速
                            $("#id_div_2").fadeIn("slow");
                            // 自定义慢速 
                            $("#id_div_3").fadeIn(1500);
                        }
                );
                // 添加点击事件
                $("#id_btn_fadeOut").click(
                        function() {
                            // 不加参数,默认速度 
                            $("#id_div_1").fadeOut();
                            // 慢速
                            $("#id_div_2").fadeOut("slow");
                            // 自定义慢速 
                            $("#id_div_3").fadeOut(1500);
                        }
                );
                // 添加点击事件
                $("#id_btn_fadeToggle").click(
                        function() {
                            // 不加参数,默认速度 
                            $("#id_div_1").fadeToggle();
                            // 慢速
                            $("#id_div_2").fadeToggle("slow");
                            // 自定义慢速 
                            $("#id_div_3").fadeToggle(1500);
                        }
                );
                // 添加点击事件
                $("#id_btn_fadeTo").click(
                        function() {
                            // 不加参数,默认速度 
                            $("#id_div_1").fadeTo("slow",0.10);
                            // 慢速
                            $("#id_div_2").fadeTo("slow",0.40);
                            // 自定义慢速 
                            $("#id_div_3").fadeTo("slow",0.7);
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("id_btn").fadeToggle();淡入和淡出
                <br/>
                fadeIn(),fadeOut(),fadeToggle(),fadeTo();
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

     $( 
    selector).fadeIn( 
    speed,callback); 
   

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

实例

     $("button").click(function(){  
    
  $("#div1").fadeIn();  
    
  $("#div2").fadeIn("slow");  
    
  $("#div3").fadeIn(3000);  
    
});

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出(渐隐) 可见的元素。

语法:

     $( 
    selector).fadeOut( 
    speed,callback); 
   

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

实例

     $("button").click(function(){  
    
  $("#div1").fadeOut();  
    
  $("#div2").fadeOut("slow");  
    
  $("#div3").fadeOut(3000);  
    
});

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法:

     $( 
    selector).fadeToggle( 
    speed,callback); 
   

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

实例

     $("button").click(function(){  
    
  $("#div1").fadeToggle();  
    
  $("#div2").fadeToggle("slow");  
    
  $("#div3").fadeToggle(3000);  
    
});

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的 不透明度（值介于 0 与 1 之间）。

Opacity: 不透明度,如果为1,则完全不透明!

如果opacity不透明度为0,则表示完全透明!

语法:

 
    $( 
    selector 
    ).fadeTo( 
    speed,opacity,callback 
    ); 
   

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的 不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

实例

     $("button").click(function(){  
    
  $("#div1").fadeTo("slow",0.15);  
    
  $("#div2").fadeTo("slow",0.4);  
    
  $("#div3").fadeTo("slow",0.7);  
    
});

jQuery 效果 - 滑动

jQuery 滑动方法可使元素 上下滑动。

实例

jQuery slideDown()
演示 jQuery slideDown() 方法。

jQuery slideUp()
演示 jQuery slideUp() 方法。

jQuery slideToggle()
演示 jQuery slideToggle() 方法。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }

        div#id_div_content {
            text-align: center;
            background-color: rgba(223,236,194,0.8);
            border: 1px solid #c3c3c3;
            padding: 20px;
            /*默认隐藏*/
            display: none;

        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        
        <button id="id_btn_slideDown" class="class_btn class_btn_green" type="button" >slideDown</button>
        <button id="id_btn_slideUp" class="class_btn class_btn_green" type="button" >slideUp</button>
        <button id="id_btn_slideToggle" class="class_btn class_btn_green" type="button" >slideToggle</button>
        
        <div id="id_div_content">
            <p>あの日見た花の名前を僕達はまだ知らない<br/>
我们仍未知道那年夏天所见到的花的名字</p>
        </div>


        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_slideDown").click(
                        function() {
                            // 展开
                            $("#id_div_content").slideDown();
                        }
                );
                // 添加点击事件
                $("#id_btn_slideUp").click(
                        function() {
                            // 收起来,折叠
                            $("#id_div_content").slideUp();
                        }
                );
                // 添加点击事件
                $("#id_btn_slideToggle").click(
                        function() {
                            // 切换 展开和折叠
                            $("#id_div_content").slideToggle();
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("id_btn").slideToggle();展开和折叠(滑动)
                <br/>
                slideDown(),slideUp(),slideToggle();
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果 (展开和折叠)。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动展开元素。

语法:

     $( 
    selector).slideDown( 
    speed,callback); 
   

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

实例

     $("#flip").click(function(){  
    
  $("#panel").slideDown();  
    
});

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动折叠元素。

语法:

     $( 
    selector).slideUp( 
    speed,callback); 
   

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

实例

     $("#flip").click(function(){  
    
  $("#panel").slideUp();  
    
});

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动折叠它们。

如果元素向上滑动，则 slideToggle() 可向下滑动展开它们。

     $( 
    selector).slideToggle( 
    speed,callback); 
   

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

实例

     $("#flip").click(function(){  
    
  $("#panel").slideToggle();  
    
});

jQuery 效果- 动画 fixed,relative,absolute

在使用jQuery动画时，你可能想要实现更加丰富的效果，

那么你可以通过使用 jQuery animate() 方法 自定义动画 来达到目的，具体的使用方法如下文所述。

jQuery animate() 方法允许您创建自定义的动画。

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建 自定义动画。

语法：

 
     $( 
    selector 
    ).animate({ 
    key-value_Object 
    } 
    ,speed,callback 
    ); 
   

必需的 key-value_object 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒值。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。

它把 <div> 元素往右边移动了 250 像素：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
            あの日見た花の名前を僕達はまだ知らない
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $(".class_btn_green").click(
                        function() {
                            // animate参数1是一个对象
                            $("#id_div_content").animate({right:"0px"});
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("div").animate();
                <br/>
                参数1:是个对象,包含css属性的n个键值对
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

核心代码

 
    $("button").click(function(){ 
    
      $("div").animate( 
    {left:'250px'} 
    ); 
    
    });

	默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

注意：在 jQuery 的 animate()方法中，

第一个参数是必须的参数，它表示一个对象,包含一组或多组CSS属性和值。

jQuery animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
            あの日見た花の名前を僕達はまだ知らない
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $(".class_btn_green").click(
                        function() {
                            // animate参数1是一个对象
                            $("#id_div_content").animate({right:"0px",opacity:"0.5",
                                height:"150px",
                                width: "150px"
                            });
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("div").animate();
                <br/>
                参数1:是个对象<br/>
                注意:position的属性值,必须是以下3者之一<br/>
                fixed,relative,absolute
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

核心代码:

     $("button").click(function(){ 
    
  $("div").animate({ 
    
    left:'250px', 
    
    opacity:'0.5', 
    
    height:'150px', 
    
    width:'150px' 
    
  }); 
    
});

	可以用 animate() 方法来操作所有 CSS 属性吗？是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载 Color Animations 插件。

可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，

比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画 并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载 Color Animations 插件。

jQuery animate() - 使用相对值

也可以定义 相对值（该值相对于元素的当前值）。

需要在值的前面加上 += 或 -=：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
            あの日見た花の名前を僕達はまだ知らない
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $(".class_btn_green").click(
                        function() {
                            // animate参数1是一个对象
                            $("#id_div_content").animate({right:"0px",opacity:"-=0.5",
                                height:"+=70px",
                                width: "+=70px"
                            });
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("div").animate();
                <br/>
                参数1:是个对象<br/>
                注意:position的属性值,必须是以下3者之一<br/>
                fixed,relative,absolute<br/>
                可以使用+=或-=相对值
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

核心代码:

     $("button").click(function(){ 
    
  $("div").animate({ 
    
    left:'250px', 
    
    height:'+=150px', 
    
    width:'+=150px' 
    
  }); 
    
});

jQuery animate() - 使用 jQuery预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

实例

 
    $("button").click(function(){ 
    
      $("div").animate({ 
    
        height:' 
    toggle 
    ' 
    
      }); 
    
    });

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，

jQuery 会创建包含这些方法调用的 "内部"队列。然后逐一运行这些 animate 调用。

核心代码:

     $("button").click(function(){ 
    
  var div=$("div"); 
    
  div.animate({height:'300px',opacity:'0.4'},"slow"); 
    
  div.animate({width:'300px',opacity:'0.8'},"slow"); 
    
  div.animate({height:'100px',opacity:'0.4'},"slow"); 
    
  div.animate({width:'100px',opacity:'0.8'},"slow"); 
    
});

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
            あの日見た花の名前を僕達はまだ知らない
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $(".class_btn_green").click(
                        function() {
                            // animate参数1是一个对象
                            var divObject = $("#id_div_content");
                            // 添加第1个动画
                            divObject.animate({height: "200px",opacity: "0.5"},"slow");
                            // 添加第2个动画
                            divObject.animate({width:"200px",opacity:"0.1"},"slow");
                            // 添加第3个动画
                            divObject.animate({width:"100px",opacity:"0.5"},"slow");
                            // 添加第4个动画
                            divObject.animate({height:"100px",opacity:"1"},"slow");
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("div").animate();
                <br/>
                参数1:是个对象<br/>
                注意:position的属性值,必须是以下3者之一<br/>
                fixed,relative,absolute<br/>
                可以使用+=或-=相对值<br/>
                还可以使用jQuery预定义的值<br/>
                动画队列演示
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
            あの花
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $(".class_btn_green").click(
                        function() {
                            // animate参数1是一个对象
                            var divObject = $("#id_div_content");
                            // 添加第1个动画
                            divObject.animate({left: "100px"},"slow");
                            // 添加第2个动画
                            divObject.animate({width:"150px",height:"70px"},"slow");
                            // 添加第3个动画
                            divObject.animate({fontSize:"3em",opacity:"0.9"},"slow");
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("div").animate();
                <br/>
                参数1:是个对象<br/>
                注意:position的属性值,必须是以下3者之一<br/>
                fixed,relative,absolute<br/>
                可以使用+=或-=相对值<br/>
                还可以使用jQuery预定义的值<br/>
                动画队列演示
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

核心代码:

     $("button").click(function(){ 
    
  var div=$("div"); 
    
  div.animate({left:'100px'},"slow"); 
    
  div.animate({fontSize:'3em'},"slow"); 
    
});

jQuery stop() 方法用于在动画或效果完成前强行让它们停止。

实例

jQuery stop() 滑动
演示 jQuery stop() 方法。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button id="id_btn_expand" class="class_btn class_btn_green" type="button" >点我展开</button>
        <button id="id_btn_stop" class="class_btn class_btn_green" type="button" >强行停止</button>
        <div id="id_div_content" style="display:none;position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
            あの花
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_expand").click(
                        function() {
                            // jQuery对象
                            var divObject = $("#id_div_content");
                            // 添加1个展开的动画
                            divObject.slideDown(1000);
                        }
                );
                // 添加点击事件
                $("#id_btn_stop").click(
                        function() {
                            // jQuery对象
                            var divObject = $("#id_div_content");
                            // 强行停止动画
                            divObject.stop();
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b>$("div").stop();<br/>
                停止动画
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

jQuery stop() 动画(带参数)
演示 jQuery stop() 方法

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

     $( 
    selector).stop( 
    stopAll,goToEnd); 
   

可选的 stopAll 参数规定是否应该清除动画队列。

默认是 false，即仅仅是停止正在活动的这个动画，但是,允许任何排入队列的动画继续向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，不带参数的 stop() ,只会清除在被选元素上正在执行的当前这个动画而已,其他后面的动画还会继续执行。

三种情况:

1.$('#div').stop();

只停止当前动画,后面的动画还会继续执行

2.$('#div').stop(true);

停止所有的动画

3.$('#div').stop(true,true);

停止所有的动画,并且会立刻goToEnd,即立刻变成动画完成时的状态

下面的例子演示 stop() 方法，不带参数：

核心代码: 只停止当前的动画,其他动画继续执行

     $("#stop").click(function(){ 
    
  $("#panel").stop(); 
    
});

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button id="id_btn_expand" class="class_btn class_btn_green" type="button" >点我展开</button>
        <button id="id_btn_stop" class="class_btn class_btn_green" type="button" >stop()</button>
        <button id="id_btn_stopTrue" class="class_btn class_btn_green" type="button" >stop(true)</button>
        <button id="id_btn_stopTrueTrue" class="class_btn class_btn_green" type="button" >stop(true,true)</button>
        <div id="id_div_content" style="display:none;position:absolute;background-color:rgb(250,128,14);width:100px;height:150px;color:white;">
            あの花
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_expand").click(
                        function() {
                            // jQuery对象
                            var divObject = $("#id_div_content");
                            // 添加1个展开的动画
                            divObject.slideDown(1500);
                            divObject.animate({fontSize:"3em"},"slow");
                        }
                );
                // 添加点击事件
                $("#id_btn_stop").click(
                        function() {
                            // jQuery对象
                            var divObject = $("#id_div_content");
                            // 只停止当前动画
                            divObject.stop();
                        }
                );
                // 添加点击事件
                $("#id_btn_stopTrue").click(
                        function() {
                            // jQuery对象
                            var divObject = $("#id_div_content");
                            // 停止所有动画
                            divObject.stop(true);
                        }
                );
                // 添加点击事件
                $("#id_btn_stopTrueTrue").click(
                        function() {
                            // jQuery对象
                            var divObject = $("#id_div_content");
                            // 停止所有动画,并直接跳到当前动画的最后状态
                            divObject.stop(true,true);
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b><br/>
                $("div").stop();停止当前动画,继续执行下一个动画<br/>
                $("div").stop(true);停止所有动画<br/>
                $("div").stop(true,true);停止所有动画,并直接变成动画结束状态<br/>
                
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

jQuery Callback 方法

Callback 函数在当前动画 100% 完成之后执行。

jQuery 动画

许多 jQuery 函数涉及动画。这些函数会将 speed 或 duration 作为可选参数。

例子：$("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

为了能在动画完成之后,做一个操作, 您可以以参数的形式添加 Callback 函数。

以下实例在隐藏效果完全实现之后回调函数:

使用 callback 实例

     $("button").click(function(){ 
    
  $("p").hide("slow",function(){ 
    
    alert("The paragraph is now hidden"); 
    
  }); 
    
});

以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

没有 callback(回调)

     $("button").click(function(){ 
    
  $("p").hide(1000); 
    
  alert("The paragraph is now hidden"); 
    
});

jQuery - Chaining

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为 链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。

"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例

     $("#p1").css("color","red").slideUp(2000).slideDown(2000); 
   

如果需要，我们也可以添加多个方法调用。

提示：当进行链接时，代码行会变得很差。

不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

实例

     $("#p1").css("color","red") 
    
  .slideUp(2000) 
    
  .slideDown(2000);

jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button id="id_btn_expand" class="class_btn class_btn_green" type="button" >点我展开</button>
        <div id="id_div_content" style="display:none;position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
            あの花
        </div>

        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_expand").click(
                        function() {
                            // jQuery对象
                            var divObject = $("#id_div_content");
                            // 添加1个展开的动画
                            divObject.slideDown("slow",function() {
                                // body...
                                $("body").css({"background-color":"black"}).css({"color":"white"});
                            });
                            
                        }
                );
                
            }
        );
        </script>
        
        <p class="sgcenter">
                <b>注意:</b><br/>
                $("div").hide("slow",callback);<br/>
                当动画完成时,将执行回调函数
                
            </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

附录:

jQuery 效果方法

下面的表格列出了所有用于创建动画效果的 jQuery 方法。

方法	描述
animate()	对被选元素应用"自定义"的动画
clearQueue()	对被选元素移除所有排队函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	移除下一个排队函数，然后执行函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换
finish()	对被选元素停止、移除并完成所有排队动画
hide()	隐藏被选元素
queue()	显示被选元素的排队函数
show()	显示被选元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止被选元素上当前正在运行的动画
toggle()	hide() 和 show() 方法之间的切换

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$(selector).animate(styles,speed,easing,callback)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed	可选。规定动画的速度。默认是 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast"
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数： swing linear 扩展插件中提供更多 easing 函数。
callback	可选。animate 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

语法 2

$(selector).animate(styles,options)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值（同上）。
options	可选。规定动画的额外选项。可能的值： speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

参数

描述

styles

必需。规定产生动画效果的 CSS 样式和值（同上）。

options

可选。规定动画的额外选项。

可能的值：

speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

未完待续,下一章节,つづく

pre_eminent

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_02_动画效果

jQuery 效果- 隐藏和显示在 jQuery 中可以使用 hide() 和 show() 方法来瞬间隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。隐藏、显示、切换，滑动，淡入淡出，以及动画实例jQuery hide() 简单的jQuery hide()方法演示。jQuery hide() 另一个hide()实例。演示如何隐藏文本。代...
复制链接

扫一扫