初步学习jquery学习笔记（三）

jQuery学习笔记三

jquery停止动画

stop函数的初步功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#panel").slideDown(8000);
            });
            $("#stop").click(function(){
                $("#panel").stop();
            });
        });
    </script>
    <style>
        #panel,#flip{
            text-align: center;
            padding: 5px;
            background-color:#e5eecc;
            border: solid 1px #803636;
        }
        #panel{
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <button id="stop">
        点击我停止
    </button>
    <div id="flip">
        点我向下滑动面板
    </div>
    <div id="panel">
        面板
    </div>
</body>
</html>

现象:当调用stop()函数的时候动画会结束

stop函数的三种参数形式的功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#start").click(function(){
                $("div").animate({left:"100px"},5000);
                $("div").animate({fontSize:"3em"},5000);
            })
            $("#stop").click(function(){
                $("div").stop();//停止当前的动画执行，队列后面的可以执行
            })
            $("#stop2").click(function(){
                $("div").stop(true);//停止所有的动画
            })
            $("#stop3").click(function(){//停止所有动画，但是会显示最后的结果
                $("div").stop(true,true);
            })
        })
    </script>

</head>

<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止动画，但完成动作</button>
    <p>点击 "开始" 按钮开始动画。</p>
    <p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
    <p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
    <p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p>

    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>

</html>

总结

1.函数调用格式

$(selector).stop(stopToAll,goToAnd)

2.参数含义

• stopAll决定是否清空动画的队列
• goToEnd决定是否完成当前动画
• 参数的默认值都是false

jquery的callback()方法

jquery中很多的函数都具有speed和duration两个参数，除此之外还有一个callback的参数，其需要传进一个函数，这个函数会在动画结束之后来执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide("slow",function(){
                    alert("文字已经成功隐藏!");
                });
            });
        })
    </script>
</head>
<body>
    <button>隐藏</button>
    <p>文本的内容，点击隐藏按钮之后会消失</p>
</body>
</html>

没有回调

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是一个段落，内容很少</p>
</body>
</html>

总结:

• callback函数作为动画函数的一个参数，在动画执行完了之后会被调用。
• 假如调用的内容不写在回调函数里面，会不执行动画，而执行调用内容

jquery 链

通过jquery可以将动画/方法链接在一起。chaining允许我们在一条语句中运行多个jquery方法，且这些方法作用于相同的元素。

之前写jquery语句都是一条接着一条，不过通过链接的技术，允许我们在相同的元素上运行多条jquery命令,一条接着一条的执行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").css("color","red").slideUp(2000).slideDown(2000);//顺序执行
            })
        })
    </script>
</head>

<body>
    <p id="p1">文字</p>
    <button>点我</button>
</body>

</html>

总结

1.使用链的好处是不需要多次查找相同的元素

2.方法按照写的方法顺序执行