PDF《在按钮上附加 hover 效果》

另外, 关於 animate() 方法在 P.2-26, stop() 方法的部分则在 P.2-33. 此程式的重点在於 on() 方法中的处理对象是以 $(this) 设定.如前一 章所介绍, this 存的值会对应使用者操作内容, 因此此程式的 on() 只会针对 「#buttons1 元素内 1~4 号的

4 个元素之一执行滑鼠移入 、移出的处理 」 , 这样就 可以做到对多个处理对象执行同一处理. 没有使用 this 会怎麽样? 如果上述程式没有使用 this, 而是如下面程式

3 , 则会出现预期外的结果.

3 $(function(){ var duration = 300;

// buttons1 第一列 省略 // buttons1 第二列 $('#buttons1 button:nth-child(n+5):nth-child(-n+8)')

1 .on('mouseover', function(){ $(this).stop(true).animate({ JavaScript 第2列按钮的 JavaScript main.js 思考如何实作! 之后在进入例程式之前, 请各位读者先自己思考一下该如何实作所介绍的功 能, 不要一下子就看答案, 不然很容易就被下面所介绍的实作方法所局限. Point! 上述程式仍可执行, 但不会区分滑鼠移出、移入处理时的执行对象,

4 个元 素皆会一同套用效果.因此, 如果要针对同一种类的按钮做个别的效果套用, 使用this 将会非常方便, 本书中许多例档中也都使用这方法, 请各位好好参考学 习. 第2列按钮的 JavaScript (jQuery) 接下来要加上第

2 列按钮的 hover 效果, 其效果如下 . B 滑鼠移入时, 按钮外框慢慢出现颜色 B 滑鼠移出时, 颜色慢慢消失 第2列按钮的效果 上述效果的实作如下 .请开启 main.js 并在第

2 列按钮的程式中加入下面程 式.#buttons1 button { border: solid 0px rgba(174,94,155,1.0);

} css 第2列按钮 CSS main.css borderWidth: '12px', color: '#ae5e9b' }, duration, 'easeOutSine');

}) .on('mouseout', function(){ $(this).stop(true).animate({ borderWidth: '0px', color: '#ebc000' }, duration, 'easeOutSine');

});

});

2 上述程式中针对 5~8 个按钮做处理?1 , 效果如下 . B B 滑鼠移入时, 执行 animate() 方法设定 borderWidth 为12px B B 滑鼠移出时, 执行 animate() 方法设定 borderWidth 为0px border 颜色可在 CSS(main.css) 档案中设定 . CSS 的初始化可透过 jQuery 处理, 如果不须要 jQuery 动态设定的话, 一般也可用上面方法设定於 CSS 档案中. 例中的 animate() 方法使用了第

3 个参数 「easing 种类」

2 , 这里是设定 为「easeOutSine」 , 关於 easing 的种类及各种效果的预览, 可参考第

2 章的说 明. 第3列按钮的 JavaScript (jQuery) 最后的第

3 列按钮, 这部分会提到先前未提及过的方法, 会有些挑战.同样 先来预览第

3 列所套用的效果如下 . Ibis Ibis Jaeger Jaeger Kingfisher Kingfisher Lark Lark html 第3列按钮的 HTML index.html #buttons1 button { position: relative;

} #buttons1 button .bg { position: absolute;

top: 0;

left: 0;

width: 0;

height: 100%;

overflow: hidden;

2 } #buttons1 button span span { display: block;

width: 224px;

css 第3列按钮的 CSS main.css B B 滑鼠移入时, 色块从左侧滑入并改变背景色与文字颜色 B B 滑鼠移出时, 回复原状 第3列按钮的效果 解说上述效果前先看 HTML 与CSS. HTML 中只有第

3 列按钮多加了 span 元素. 从上面程式可以知道有

2 层按钮的设计, 程式就是要针对内侧 span 的按钮 做处理.CSS 中则对重叠的按钮设定不同颜色?1 ,?并设定 overflow:hidden;

?2 . $(function(){ var duration = 300;

// buttons1 第一列 省略 // buttons1 第二列 省略 // buttons3 第三列 $('#buttons1 button:nth-child(n+9)') .on('mouseenter', function(){ $(this).find('> span').stop(true).animate({