<HeadFirst_jQuery> O'REILLY_Chap.5_jQuery 效果和动画

<HeadFirst_jQuery> O’REILLY_Chap.5_jQuery 效果和动画

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_jQuery>作者 Ryan Benedetti & Ronan Cranley
感谢<HeadFirst_jQuery>翻译 林琪

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• 实现jQuery效果和动画需要CSS定位.

• position 是一个CSS属性, 它会控制浏览器布局引擎如何以及在哪里放置元素. jQuery的很多效果都是使用CSS position 属性完成的.

• 要动画显示元素时, 需要把CSS position 属性设置为 absolute fixed 或 relative.

• 如果保留CSS position 属性仍设置为它的默认设置(也就是 static ), 就无法应用上, 下, 左, 右定位. 设置 animate 函数时必须能够设置这些位置, 而 static 不支持这一点.

• 淡入淡出效果: $(#lightning1).fadeIn("fast").fadeOut("fast");

• $("myElement").animate({left: "100px"}, 500); animate的第一个参数选择你希望动画改变的CSS属性, 第二个参数是时限, 单位为毫秒. 通过这个参数可以控制完成动画花费的时间.

• animate中的CSS参数要使用DOM标准设置, 而不是CSS标准.