jQuery中的动画
一、show()方法和hide()方法
(一). show()方法和hide()方法
show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"
//用如下代码隐藏element元素
$("element").hide();
//与用css()的方法设置display属性效果相同
$("element").css("display","none");
- 当把元素隐藏后，可以使用
show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其它除了"none"之外的值)
$("element").show();
- 通过
show()和hide()方法可以控制"内容"的显示和隐藏 hide()方法在将"内容"的display属性值设置为"none"之前，会记住原先的display属性值("block"或"inline"或其它除了"none"之外的值)。当调用show()方法，就会根据hide()方法记住的display属性值来显示元素
$().ready(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
})
})
//当光标滑过的时候，就触发事件
//光标滑过标题后，相应的内容将被显示；滑出标题后，相应的内容则被隐藏
/*"内容"的display属性的值是"block"，当单击"标题"连接执行hide()方法的时候，hide()方法会做两步动作，首先记住"内容"的display属性的值"block"，然后把display属性的值设置为"none"*/
(二). show()方法和hide()方法让元素动起来
show()方法和hide()方法在不带任何参数的情况下，相当于css("display","none/block/inline"),作用是立即隐藏或显示匹配的元素，不会有任何动画- 如果希望在调用
show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数 - 指定一个速度关键字或者为显示速度指定一个数字（单位是毫秒）
$("element").show("slow");
$().ready(function(){
$("#panel h5.head").hover(function(){
$(this).next().hide(600);
},function(){
$(this).next().show(600);
})；
/*从代码执行过程中，可以发现hide(600)方法会同时减少"内容"的高度、宽度和不透明度，直至这3个属性的值都为0，最后设置该元素的CSS规则为"display:none"*/
/*同理，show(600)方法则会从上到下增大"内容"的高度，从左到右增大"内容"的不透明度，直至新闻的内容完全显示*/
})
二、fadeIn()方法和fadeOut()方法
- 与
show()方法不同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度 fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none");fadeIn()方法则相反
$().ready(function(){
$("#panel h5.head").hover(function(){
$(this).next().fadeIn("slow");
},function(){
$(this).next().fadeOut("slow");
});
/*如果只想改变"内容"的不透明度，就可以使用fadeOut()方法*/
})
三、slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法只会改变元素的高度- 如果一个元素的
display属性值为"none"，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏 - jQuery中的人很动画效果，都可以指定3种速度参数，即
"slow"、"normal"和"fast"(时间长度分别是0.6秒、0.4秒和0.2秒)。当使用关键字时要加双引；如果用数字作为时间参数时就不需要加引号
$().ready(function(){
$("#panel h5.head").hover(function(){
$(this).next().slideDown("slow");
},function(){
$(this).next().slideUp("slow");
});
})
四、自定义动画方法animate()
(一). 相关概念
- 在jQuery中，可以使用
animate()方法来自定义动画 animate()的语法结构为：animate(params,speed,callback)params：一个包含样式属性及值的映射速度speed：参数，可选callback：在动画完成时执行的函数
(二). 自定义简单动画
#panel{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background:t #96E555;
cursor: pointer;
}
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
});
/*为了使这个元素东动起来，要更改元素的"left"样式属性*/
/*需要注意的是在使用animate()方法之前，为了能影响该元素的"top"、"left"、"bottom"和"right"样式属性，必须先把元素的position样式上设置为"relative"或者"absolute"*/
})
(三). 累加、累减动画
$(function(){
$("#panel").click(function(){
$(this).animate({left:"+=500px"},300);
});
/*加上"+="或者"-="符号即表示在当前位置累加或者累减*/
})
(四). 多重动画
1. 同时执行多个动画
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px",height:"200px"},3000);
});
/*运行代码后，<div>元素在向右滑动的同时，也会放大高度*/
})
2. 按顺序执行多个动画
- 如果想要按照顺序执行动画，只需要把代码按照顺序就可以
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000)
})
})
- 因为
animate()方法都是对同一个jQuery对象进行操作，所以也可以改为链式写法 - 动画效果的执行具有先后顺序，称为"动画队列"
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000)
.animate({height:"200px"},3000);
})
})
(五). 综合动画
- 为同一元素应用多重效果时，可以通过链式方式对这些效果进行排队
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
});
})
五、动画回调函数
css()方法并不会加入到动画队列中，而是立即执行- 可以使用回调函数（
callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可以 callback回调函数适用于jQuery所有的动画方法,例如slideDown()方法
$("#element").slideDown("normal",function(){
//在效果完成后做其他的事情
})
/*这段代码表示id="element"的元素将在0.4秒内（正常速度）向下完全展开。当动画完成后，执行回调函数体内的代码*/
/*1. 如果想在最后一步切换元素的css样式，而不是隐藏元素*/
/*2. 如果是按常规的方式，将fadeOut("slow")改为css("border","5px solid blue")*/
/*3. 这样并不能得到预期的效果。预期的效果时在动画的最后一步改变元素的样式，而实际的效果是，刚开始 执行动画的时候，css()方法就被执行了*/
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.css("border","5px solid blue");
})
})
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
})
})
})
六、停止动画和判断是否处于动画状态
(一). 停止元素动画
- 很多时候需要停止匹配元素正在进行的动画，如果需要在某处停止动画，需要
stop()方法 stop()方法的语法结构为：stop([clearQueue],[gotoEnd])- 参数
clearQueue和gotoEnd都是可选的参数，为Boolean值（true或false） clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态- 如果直接使用
stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画 stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画
$(function(){
$("#panel").hover(function(){
$(this).animate({height:"150",width:"300"},200);
},function(){
$(this).animate({height:"22",width:"60"},200);
});
})
$(function(){
/*1. 在为一个元素绑定hover事件之后，用于把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就将光标移出这个元素了，那么光标移出的动画效果将会被放进队列之中，等待光标移入的动画结束后在执行*/
/*2. 因此如果光标移入移出的过快就会导致动画效果与光标动作不一致。此时只要在光标的移入、移出动画之前加入stop()方法，就可以解决这个问题*/
$("#panel").hover(function(){
$(this).stop()
.animate({height:"150",width:"300"},200);
},function(){
$(this).stop()
.animate({height:"22",width:"60"},200);
});
})
$(function(){
$("#panel").hover(function(){
$(this).stop()
.animate({height:"150"},2000) //如果在此时触发了光标移出的事件
//将执行下面的动画，而非光标移除事件的动画
.animate({width: "300"},3000);
},function(){
$(this).stop()
.animate({height:"22"},2000)
.animate({width:"60"},3000);
})
})
/*此时只用一个不带参数的stop()方法就显得有些没有用了。因为stop()方法只会停止当前的动画，并继续进行下面的animate({width:"300"},3000)动画，而光标移除事件要等这个动画结束后才会执行*/
/*这种情况下的stop()的第1个参数（clearQueue）设置为true，此时程序会把当前元素接下来尚未执行完的动画队列都清空*/
$(function(){
$("#panel").hover(function(){
$(this).stop(true)
.animate({height:"150"},2000)
//如果在此时触发了光标移出事件，直接跳过后面的动画队列
.animate({width: "300"},3000);
},function(){
$(this).stop(true)
.animate({height:"22"},2000)
.animate({width:"60"},3000);
})
})
/*1. 第2个参数（gotoEnd）可以用于正在执行的动画直接达到结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop(false,true)这种方式来让当前动画直接到达末状态*/
/*2. 当然也可以两者结合起来使用stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清空动画队列*/
/*3. 注意，jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法*/
$(function(){
$("div.content")
.animate({width:"300"},200)
.animate({height:"150"},300)
.animate({opacity:"0.2",2000});
})
/*无论怎么设置stop()方法，均无法在改变"width"或者"height"时，将此<div>元素的末状态变成300*150的大小，并且设置不透明度与为0.2*/
(二). 判断元素是否处于动画状态
- 在使用
animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致 - 当用户在某个元素上执行
animate()动画时，就会出现动画积累 - 解决办法是判断元素是否正在处于动画状态，如果元素不处于动画状态，才会为元素添加新动画，否则不添加
if(!$(element).is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
/*这个判断方法在animate()动画中经常被用到，需要特别注意*/
(三). 延迟动画
- 在动画执行过程，如果想对动画进行延迟操作，那么可以使用
delay()方法 delay()方法允许我们将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行，也可以用于自定义队列
$().ready(function() {
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.delay(1000)
.animate({top:"200px",width:"200px"},3000)
.delay(2000)
.fadeOut("slow");
})
});
七、其他动画方法
(一). toggle()方法
toggle()可以切换元素的可见状态。如果元素是可见的，则切换你为隐藏的；如果元素是隐藏的，则切换为可见的toggle()的语法结构为：toggle(speed,[callback])
$(function(){
$(".head").click(function(){
$(this).next().toggle();
});
})
(二). slideToggle()方法
slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画只调整元素的高度slideToggle()的语法结构为：slideToggle(speed,[easing],[callback])
$(function(){
$(".head").click(function(){
$(this).next().slideToggle();
});
})
(三). fadeTo()方法
fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配元素的高度和宽度不会发生变化fadeTo()的语法结构为：fadeTo(speed,opacity,[callback])
$(function(){
$(".head").click(function(){
$(this).next().fadeTo(600,0.2);
});
})
(四). fadeToggle()方法
fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果值调整元素的不透明度fadeToggle()的语法结构为：fadeToggle(speed,[easing],[callback])
$(function(){
$(".head").click(function(){
$(this).next().fadeToggle();
});
})
八、动画方法概括
(一). 改变样式属性
1. 动画方法说明
| 方法名 | 说明 |
|---|---|
hide()和show() | 同时修改多个样式属性即高度、宽度和不透明度 |
fadeIn()和fadeOut() | 只改变不透明度 |
slideUp()和slideDown() | 只改变高度 |
fadeTo | 只改变不透明度 |
toggle()（1.7后失效） | 用来代替hide()方法和show()方法，所以会同时修改多个样式属性即高度、宽度和不透明度 |
slideToggle() | 用来代替slideUp()方法和slideDown()方法，所以只能改变高度 |
fadeToggle() | 用来代替fadeIn()方法和fadeOut()方法，所以只改变不透明度 |
animate() | 属于自定义动画的方法，以上各种动画方法实质内部都调用了animate()方法。此外，直接使用animate()方法还能自定义其他的样式属性，例如"left"、"marginLeft"、"scrollTop"等 |
2. animate()方法代替动画方法
(1). 用animate()方法代替show()方法
$(function(){
$("p").animate({
height:"show",
width:"show",
opacity:"show"
},400);
})
(2). 用animate()方法代替fadeIn()方法
$(function(){
$("p").animate({
opacity:"show"
},400);
})
(3). 用animate()方法代替slideDown()方法
$(function(){
$("p").animate({
height:"show",
},400);
})
(4). 用animate()方法代替fadeTo()方法
$(function(){
$("p").animate({
opacity:"0.6"
},400);
})
//等价于
$("p").fadeTo(400,0.6);
3. 事实上，这些动画就是animate()方法的一种内置了特定样式属性的简写方式
4. 在animate()方法中，这些特定样式的属性值可以为"show"、"hide"和"toggle"，也可以是自定义数字（值）
(二). 动画队列
1. 一组元素上的动画效果
- 当在一个
animate()方法中应用多个属性时，动画是同时发生的 - 当以链式的写法应用动画方法时，动画是按照顺序发生的(除非
queue选项值为false)
2. 多组元素上的动画效果
- 默认情况下，动画都是同时发生的
- 当以回调的形式应用动画方式时（包括动画的回调函数和
queue()方法的回调函数），动画是按照回调的顺序发生的 - 另外，在动画方法中，要注意其他非动画方法会插队，例如，
css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中或者queue()方法中
源于整理《锋利的 jQuery》
扫一扫
9562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
