jQuery 来了--动画,停止动画,回调函数Callback,链
动画
animate()方法
作用:用于创建自定义动画
语法:$(“selector”).animate({params},speed,callback);
参数 params:必需值。定义形成动画的CSS属性
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'200px'});
});
});
</script>
<button>开始动画</button><br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
注:默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
animate()–操作多个属性
使用animate()方法生成动画的过程中可同时使用多个属性
注:几乎可以使用animate()方法操作所有CSS属性,但属性名必须使用“驼峰命名法”,如应使用paddingLeft而不是padding-left
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
animate()–使用相对值
相对值:相对于元素的当前值,可以自定义相对值,需要在值的前面加上 += 或 -=
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
animate()–使用预定义的值
可以将属性的动画值设置为”show”,”hide”或”toggle”
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
animate()–使用队列功能
编写多个 animate() 调用,jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用
例1.
<script>
$(document).ready(function(){
$("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");
});
});
</script>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
例2.
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
停止动画
stop()方法
作用:在动画或效果完成之前停止它
语法:$(“selector”).stop(stopAll,goToEnd);
参数 stopAll:可选值。规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行
参数 goToEnd:可选值。规定是否立即完成当前动画,默认是false
默认stop()会清除在被选元素上指定的当前动画
例.
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
Callback
回调函数Callback在当前动画 100% 完成之后执行
例1.
回调函数会在动画效果完全实现后执行:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(2000,function(){
alert("段落现在被隐藏了");
});
});
});
</script>
<button>隐藏</button>
<p>Hello Nico</p>
例2.
未使用回调函数,则在动画效果完成前执行:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("现在段落被隐藏了");
});
});
</script>
<button>隐藏</button>
<p>Hello Nico</p>
链
作用:链允许在一条语句中运行多个jQuery方法(在相同的元素上)
方法链接
如需链接一个动作,只需把该动作追加到之前的动作上
chaining的作用:允许在相同的元素上一条接着一条运行多条jQuery命令。避免浏览器多次查找相同的元素
例.
<script>
$(document).ready(function()
{
$("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>