咩星征服計劃 用 Js 征服地球 Part III
Download as PPTX, PDF0 likes659 views
jQuery Seletor (Advanced) jQuery Effect
![jQuery Effect －動畫
.animate(
properties
[, duration ]
[, easing ]
[, complete ]
)](https://image.slidesharecdn.com/jspartiii-140109080811-phpapp02/85/Js-Part-III-46-320.jpg)
咩星征服計劃 用 Js 征服地球 Part III
- 1. 咩星征服計劃 用 JS 征服地球 Part III
- 2. 羊小咩 Lamb Mei [email protected] [email protected] 現任 禾米數位創意 Consultant
- 4. course content • jQuery Seletor (Advanced) • jQuery Effect • Practice
- 6. 打的雖然是進階
- 9. jQuery Seletor (Advanced) . find() 由目前已經搜索到的元素，再使用一次搜索器
- 10. jQuery Seletor (Advanced) $( "div" ).find( "span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
- 11. jQuery Seletor (Advanced) $( "div" ).find( "span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
- 12. jQuery Seletor (Advanced) $( "div" ).find( "span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
- 13. jQuery Seletor (Advanced) . children() 由目前已經搜索到的元素，再使用一次搜索器 與 .find() 相似但.children 只單往下搜索一個層級
- 14. jQuery Seletor (Advanced) $( "div" ). children() <div>And One Last <span>Time</span> </div>
- 15. jQuery Seletor (Advanced) $( "div" ). children() <div>And One Last <span>Time</span> </div>
- 16. jQuery Seletor (Advanced) $( "div" ). children() <div>And One Last <span>Time</span> </div>
- 17. jQuery Seletor (Advanced) $( "div" ). children("span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
- 18. jQuery Seletor (Advanced) $( "div" ). children("span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
- 19. jQuery Seletor (Advanced) $( "div" ). children("span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
- 20. jQuery Seletor (Advanced) . parent() 與 . children () 相反往上搜索一個層級
- 21. jQuery Seletor (Advanced) $( "p" ) .parent( ".selected" ) <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
- 22. jQuery Seletor (Advanced) $( "p" ) .parent( ".selected" ) <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
- 23. jQuery Seletor (Advanced) $( "p" ) .parent( ".selected" ) <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
- 24. jQuery Seletor (Advanced) . siblings() 取得相似兄弟姊妹的元素
- 25. jQuery Seletor (Advanced) $( "li.third-item" ).siblings() <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li>
- 26. jQuery Seletor (Advanced) $( "li.third-item" ).siblings() <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li>
- 27. jQuery Seletor (Advanced) $( "li.third-item" ).siblings() <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li>
- 28. jQuery Seletor (Advanced) . next() 取得相似元素的下一個
- 31. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li>
- 32. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li>
- 33. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li>
- 34. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> 0
- 35. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> 1
- 36. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> 2
- 39. jQuery Effect
- 41. jQuery Effect －淡入淡出 .fadeIn() 淡入元素 . fadeOut() 淡出元素
- 42. jQuery Effect 滑動
- 43. jQuery Effect －滑動 . slideDown() 向下滑動 .slideUp() 向上滑動 . slideToggle() 滑動切換
- 44. jQuery Effect 動畫
- 45. jQuery Effect －動畫 . animate(properties); 製定CSS動畫 Properties 為CSS 屬性
- 46. jQuery Effect －動畫 .animate( properties [, duration ] [, easing ] [, complete ] )
- 47. jQuery Effect －動畫 $( "#book" ).animate( { opacity: 0.25, left: "+=50”} );
- 48. jQuery Effect －動畫 $( "#book" ).animate( { opacity: 0.25, left: "+=50”}, 5000, function() { // Animation complete. } );
- 49. Practice
- 50. Practice 下拉選單
- 51. Practice -下拉選單 下拉選單 - 練習網址 http://goo.gl/fmBRh1
- 53. Practice -下拉選單 滑入menu 背景變色 使用 .hover( ) .css( ) {background:"#AAAACC"}
- 54. Practice -下拉選單 滑入menu 背景變色 使用 .hover( ) .css( ) {background:"#AAAACC"} 完整範例 http://goo.gl/L9VNnf
- 56. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover( ) .stop( ) .slideDown() .slideUp()
- 57. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover( ) .stop( ) .slideDown() .slideUp() 完整範例 http://goo.gl/t1yZku
- 58. Practice 顯示效果
- 59. Practice -下拉選單 顯示效果 - 練習網址 http://goo.gl/WeJ4uB
- 60. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover() . animate()
- 61. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover() . animate() 完整範例 http://goo.gl/GnqnzN
- 62. Thank You! 羊小咩 Lamb Mei [email protected] [email protected] 2014 / 01 / 09