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.方法按照写的方法顺序执行