If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org*.kasandbox.org 没有被阻止.

主要内容

复习:jQuery 中的 DOM 动画

jQuery 提供数种控制动画和效果的函数,列在文档

改变可见性

为了进行简单的可见性改变,你可以用 hide()show():
$("#pic").hide();
$("#pic").show(); (请看例子)
你还可以用 toggle(),它会根据现有的状态决定显示或隐藏: $("#pic").toggle(); (请看例子)
你可以为任何这些函数代入时限,jQuery 并会按照这些时限来展示可见性的变化: $("#pic").toggle(1000);
你还可以用 slideDown(), slideUp()slideToggle() 做出滑动效果 (请看例子)fadeIn(), fadeOut()fadeToggle() 来做出逐渐消失的效果 (请看例子).
你可以将一个回调函数当作第二个参数代入任何这些函数,一旦动画完成,jQuery 会调用这个回调函数:
$("#pic").toggle(1000, function() {
    $("body").append("It's here!");
});
你还可以将多个效果连在一起并调用 delay()来控制效果之间的延迟:
$("#pic").slideUp(300).delay().fadeIn();

自定义的动画

如果你要把具体的 CSS 属性制成动画,你可以用 animate()
    $("#pic").animate({
       width: "70%",
       opacity: 0.7,
       padding: 20
    }, 1000);
请注意你只能将接受数值的 CSS 属性制成动画 - 你不能这样把比如 'color' 这样的属性制成动画。(请看例子)
你还可以为 animate() 附加各种回调函数,来了解此动画何时在运作中或已完成。详情查看文档

严谨地制作动画

动画总应该改善用户的体验,而不是恶化它。动画应该帮助用户了解你的网页 APP 的状态或者增加一点乐趣 - 它们不应让网页无谓地减慢而令用户烦恼。你可以请用户提供有关运用动画的反馈或者与设计师合作来决定如何以及在哪里加入动画。
如果你知道你的用户在用对动画运作不佳的设备,你可以将 $.fx.off 设定为 true.

想加入讨论吗?

尚无帖子。
你会英语吗?单击此处查看更多可汗学院英文版的讨论.