jQuery study notes three

jquery stop animation

Preliminary Functional stop function

<!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>

Symptom: When you call stop () function when the movie will end

Parameters of three kinds of functionality in the form of 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>

Summary
1. Function call

$(selector).stop(stopToAll,goToAnd)

2. Definition

stopAll decide whether to clear the queue animation
goToEnd decide whether to complete the current animation
The default value of the parameter is false

jquery's callback () method

jquery in a lot of speed and duration function has two parameters, in addition to a callback parameter, which requires pass into a function that will be the end of the animation later in execution

<!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>

No callbacks

<!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>

to sum up:

callback function as a parameter animation function, after the finished animation execution will be called.
If the contents of the call does not write the callback function which will not perform animations, and execute the call content

jquery chain

You can be linked together via jquery animation / methods. chaining allows multiple jquery way we run in a single statement, and these methods are applied to the same elements.
Before writing a jquery statements are followed by one, but by linking technology that allows us to run multiple jquery command on the same element, followed by a one execution.

<!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>

Summary of
benefits 1. Use the chain does not need many times to find the same elements
2. The method according to the write method of execution order

Learning jquery preliminary study notes (c)