jQuery显示与隐藏
-
show([speed,[easing],[fn]])
- 显示隐藏的匹配元素
- 内部的实现原理是根据当前操作的元素是块级还是行内决定的
- 块级内部调用
display:block;,行内内部调用display:inline - 参数
-
speed字串符速度slow,normal,fast或表示动画时长的毫秒数值 -
easing用来指定切换效果，默认是swing，可用参数linear -
fn在动画完成时执行的回调函数，每个元素执行一次
-
<script>
$("button").eq(0).click(function () {
$("div").show(1000, function () {
alert("animation over");
});
});
</script>
-
hide([speed,[easing],[fn]])
- 隐藏显示的元素
- 参数
-
speed字串符速度slow,normal,fast或表示动画时长的毫秒数值 -
easing用来指定切换效果，默认是swing，可用参数linear -
fn在动画完成时执行的回调函数，每个元素执行一次
-
<script>
$("button").eq(0).click(function () {
$("div").hide(1000, function () {
alert("show over");
});
});
</script>
-
toggle([speed],[easing],[fn])
- 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
- 参数
-
speed字串符速度slow,normal,fast或表示动画时长的毫秒数值 -
easing用来指定切换效果，默认是swing，可用参数linear -
fn在动画完成时执行的回调函数，每个元素执行一次
-
<script>
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
alert("Switch over");
});
});
</script>
jQuery滑动效果
-
slideDown([speed],[easing],[fn])
- 通过高度变化（向下增大）来动态地显示所有匹配的元素
- 参数与显示隐藏函数参数一样
<script>
$("button").eq(0).click(function () {
$("div").slideDown(1000, function () {
alert("SlideDown");
});
});
</script>
-
slideUp([speed,[easing],[fn]])
- 通过高度变化（向下增大）来动态地隐藏所有匹配的元素
- 参数与显示隐藏函数参数一样
<script>
$("button").eq(1).click(function () {
$("div").slideUp(1000, function () {
alert("SlideUp");
});
});
</script>
-
slideToggle([speed],[easing],[fn])
- 通过高度变化来切换所有匹配元素的可见性
- 参数与显示隐藏函数参数一样
<script>
$("button").eq(2).click(function () {
$("div").slideToggle(1000, function () {
alert("SlideToggle");
});
});
</script>
jQuery淡入淡出
参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已
-
fadeIn([speed],[easing],[fn])
- 淡入动画
<script>
$("button").eq(0).click(function () {
$("div").fadeIn(1000, function () {
alert("Over");
});
});
</script>
-
fadeOut([speed],[easing],[fn])
- 淡出动画
<script>
$("button").eq(1).click(function () {
$("div").fadeOut(1000, function () {
alert("Over");
});
});
</script>
-
fadeToggle([speed,[easing],[fn]])
- 切换动画(显示变淡出,不显示变淡入)
<script>
$("button").eq(2).click(function () {
$("div").fadeToggle(1000, function () {
alert("Over");
});
});
</script>
-
fadeTo([[speed],opacity,[easing],[fn]])
- 淡入到指定透明度动画
- 通过第二个参数,淡入到指定的透明度(取值范围0~1)
<script>
$("button").eq(3).click(function () {
$("div").fadeTo(1000, 0.2, function () {
alert("Over");
})
});
</script>
jQuery自定义动画
-
animate(params,[speed],[easing],[fn])
- 用于创建自定义动画的函数
- 参数
- 第一个参数: 接收一个对象, 可以在对象中修改属性
- 第二个参数: 指定动画时长
- 第三个参数: 指定动画节奏, 默认就是
swing - 第四个参数: 动画执行完毕之后的回调函数
<script>
// 修改属性
$("button").eq(0).click(function (){
$(".box1").animate({
width: 500
}, 2000, "linear", function () {
alert("Over");
});
});
// 同时修改多个属性
// 多个属性动画会同时执行
$("button").eq(1).click(function (){
$(".box2").animate({
width: 200,
marginLeft:200
}, 2000, "linear", function () {
alert("Over");
});
});
// 每次开始运动都必须是初始位置或者初始状态
// 如果想在上一次位置或者状态下再次进行动画可以使用累加动画
$("button").eq(2).click(function (){
$(".box3").animate({
width: "+=100"
}, 2000, "linear", function () {
alert("Over");
});
});
// 初次之外，还可以使用显示隐藏等函数的关键字
$("button").eq(3).click(function (){
$(".box4").animate({
width: "hide"
// width: "toggle"
}, 2000, "linear", function () {
alert("Over");
});
});
</script>
-
delay(duration,[queueName])
- 设置一个延时来推迟执行队列中之后的项目
<script>
// 表示width执行完后过2s在执行高度动画
$(".box").animate({
width: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
</script>
-
stop([clearQueue],[jumpToEnd])
- 停止所有在指定元素上正在运行的动画
<script>
$("button").eq(1).click(function () {
// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);
// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);
// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);
// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
});
</script>
-
finish( [queue ] )
- 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
- 当
.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除
<script>
$("button").eq(0).click(function () {
$(".one").animate({
height: 500
}, 2000);
$(".one").animate({
width: 500
}, 1000);
});
// 停止所有动画,并将CSS设置为其最终值
$("button").eq(1).click(function () {
$(".one").finish();
});
</script>
jQuery动画设置
<script>
// 关闭页面上所有的动画
jQuery.fx.off = true;
// 设置动画的显示帧速(ms)
jQuery.fx.interval = 100;
</script>
