jQuery 中的动画效果

Question

隐藏 和 显示

hide()、show()

$(selector).hide()
$(selector).hide(speed, callback);
$(selector).show()
$(selector).show(speed, callback);

• speed 参数规定隐藏/显示的速度，可以取以下值：slow、fast 或毫秒
• callback 参数是隐藏或显示完成后所执行的函数名称

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
        
        $("p").hide(1000);
        
        // 第二个参数是一个字符串，表示过渡使用哪种缓动函数。(jQuery 自身提供"linear" 和 "swing"，其他可以使用相关的插件)
        $("div").hide(1000,"linear",function(){
            alert("Hide() 方法已完成!");
        });
    });
    $("#show").click(function(){
        $("p").show();
    });
});

小结

对于可选的 callback 参数，有以下两点说明：

1. $(*selector*) 选中的元素的个数为 n 个，则 callback 函数会执行 n 次；
2. callback 函数名后加括号，会立刻执行函数体，并且只会调用一次，如果不加括号，元素等到显示/隐藏完成后才执行，且会调用多次；
3. callback 既可以是函数名，也可以是匿名函数；

toggle()

是切换 hide() 和 show() 方法

$(selector).toggle()
$(selector).toggle(speed,callback);

• speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
• callback 参数是隐藏或显示完成后所执行的函数名称

淡入淡出

fadeIn()

fadeIn() 用于淡入已隐藏的元素

$(selector).fadeIn(speed,callback);

• speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒
• callback 参数是 fading 完成后所执行的函数名称

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

fadeOut()

用于淡出可见元素

$(selector).fadeOut(speed,callback);

• speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。
• callback 参数是 fading 完成后所执行的函数名称

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});

fadeToggle()

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});

fadeTo()

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）, fadeTo() 没有默认参数，必须加上 slow/fast/Time

$(selector).fadeTo(speed,opacity,callback);

• speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒
• opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
• callback 参数是该函数完成后所执行的函数名称

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

滑动

slideDown()

用于向下滑动元素

$(selector).slideDown(speed,callback);

• speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒
• callback 参数是滑动完成后所执行的函数名称

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});

slideUp()

slideUp() 方法用于向上滑动元素

$(selector).slideUp(speed,callback);

• 可选的 speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。
• 可选的 callback 参数是滑动完成后所执行的函数名称。

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});

slideToggle()

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换.

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

动画

animate()

animate() 方法用于创建自定义动画

$(selector).animate({params},speed,callback);

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

注意： 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});

注意：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。

使用相对值

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -= ：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});

使用预定义的值

可以把属性的动画值设置为 show、hide 或 toggle：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});

使用队列功能

如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的内部队列。然后逐一运行这些 animate 调用

$(document).ready(function(){
  $("button").click(function(){
    let 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");
  });
});

停止动画

stop()

stop() 方法用于在动画或效果完成前对它们进行停止

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

$(selector).stop(stopAll,goToEnd);

• 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
• 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

默认 stop() 会清除在被选元素上指定的当前动画

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop(true);
  });
});

小结

1. 如果动画有队列的话，想实现其快速完成所有动画并停止，就要相应的与队列数对应条数的停止语句
2. 被立即停止的动画不会触发回调，被立即完成的动画会触发回调。

链 Chaining

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我们也可以添加多个方法调用。