PDF《02 利用新增/ 删除类别制作动画》

CHAPTER

02 利用新增/删除类别制作动画 CHAPTER01 中介绍如何使用 animate() 方法制作动画 , 但这方法只能对可 设定数值的 CSS 属性进行变化 , 下面将介绍针对 HTML 元素透过附加 / 移除 CSS 的class 样式属性制作动画 , 此方法对於非数值的 CSS 属性也可使用.

例执行画面例资料夹/PART01/CHAPTER02/ 例1例2例3垂直方向旋转 水平方向旋转 例4技术笔记01 addClass()/removeClass() 方法 对指定的 HTML 元素附加 class 属性可用 addClass() 方法 , 删除 class 属性则用 removeClass() 方法.透过附加 / 删除设定 CSS 的类别 , 就可改变该元素的样式. 其与 animate() 方法不同 , 任何 CSS 属性都可使用 , 合并使用 transition 与transform 等CSS3 的动画扩充属性 , 就可以简单的做出动画效果. addClass() 方法 格式 $( 选择器 ).addClass(class_name) 功能 对$( 选择器 ) 元素附加 CSS 的class 属性 , 若要附加多个类别 , 可以空白 区隔します 参数 class_name:附加至 HTML 的class 属性名称 removeClass() 方法 格式 $( 选择器 ).removeClass(class_name) 功能 对$( 选择器 ) 元素移除 CSS 的class 属性 , 若要移除多个类别 , 可以空白 区隔します 参数 class_name:从HTML 移除的 class 属性名称 当目标元素已经有设定 class 属性时 , 则会维持原类别并附加新的类别上去. 例1的说明改变按钮背景颜色 本章节将介绍滑鼠移入触发动画的

4 个例 , 首先是改变背景颜色. HTML HTML 中配置一个设定「cssAnim」类别名称的按钮. sample1.html BUTTON CSS CSS 中定义滑鼠未重叠按钮时的状态以及动画变化后之样式 , 分别设定於不同选择 器中 , 例最终将改变 color 属性以及 background-color 属性的值. CCCCCCCCCCC C C C C C C C C C C C C C css/style1.css .cssAnim { padding: 15px 0;

width: 150px;

color: #000;

font-weight: bold;

text-align: center;

display: inline-block;

overflow: hidden;

background-color: #cfcfcf;

border: #999 1px solid;

transition: all 0.3s linear;

} 初始状态的按钮样式 .bgColor { color: #fff;

background-color: #000;

} 动画后的按钮样式 初始状态的按钮样式中设定 transition 属性 , 目标元素设定为「all」, 动画时间请设 定随意的秒数. JavaScript 当滑鼠移入有「cssAnim」类别名称的元素时 , 使用 addClass() 与removeClass() 附加 / 移除「bgColor」类别以控制动画. js/script1.js $('

.cssAnim'

).hover(function(){ $(this).addClass('

bgColor'

);

? }, function(){ $(this).removeClass('

bgColor'

);

? });

滑鼠移入 / 滑鼠移出时的事件处理使用 hover() 方法 ( → P.15).

1 滑鼠移入时用 addClass() 方法附加「bgColor」类别 , 让按钮因动画效果而改变. 滑鼠移出处理的

2 中,用removeClass() 方法移除「bgColor」类别 , 让改变的 color 属性值及 background-color 属性值回到「cssAnim」类别选择器原本设定的值. 例2的说明圆角变化させる 接下来的例当滑鼠移入时,以动画效果将按钮的四个角变化成圆角,HTML(sample2.html) 的部分与例

1 相同. CSS CSS 的内容也大致与例

1 相同 , 但改为使用 border-radius 属性让其变为圆角. css/style2.css .cssAnim { padding: 15px 0;

width: 150px;

color: #000;

font-weight: bold;

text-align: center;

display: inline-block;

overflow: hidden;

background-color: #cfcfcf;

border: #999 1px solid;

transition: all 0.3s linear;