使用 jQuery 打造互動性網頁動畫效果
4.6 (844 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,654 students enrolled

使用 jQuery 打造互動性網頁動畫效果

儘管你/妳沒有 JavaScript 基礎也適合上這門課,為網頁添加具互動性的網頁動畫效果!
4.6 (844 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,654 students enrolled
Last updated 7/2020
Traditional Chinese
Traditional Chinese
Price: $49.99
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 20 articles
  • 32 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 能夠掌握如何在網頁上設計互動性網頁動畫效果
  • 有辦法輕易整合別人寫好的第三方動畫插件,並套用在自己的網頁上
  • 有能力評估別人的網站究竟是用了哪些插件來設計網頁動畫效果
  • 當 jQuery 程式碼變多時,也能夠有條理地進行維護整理
Course content
Expand all 68 lectures 05:55:51
+ jQuery 入門
11 lectures 46:44
課程最終任務說明
00:10
六角學院線上問答會資訊
00:31
初探 jQuery 強大之處(練習流程)
00:04
下載jQuery檔案,介紹1.x與2.x的差別
06:21
下載jQuery檔案,介紹1.x與2.x的差別-課程補充
00:22
設定 jQuery 環境好簡單
11:35
jQuery 環境建置範例程式碼
00:03
小叮嚀(win熱鍵提醒):使用 Sublime 插件提升寫 jQuery 效率
00:19
第一章測驗
2 questions
+ 選擇器與事件:開始讓你的網頁具有互動性吧!
8 lectures 31:14
選擇器:設定 CSS 般指定要操控的網頁元素
06:23
選擇器範例程式碼
00:05
輕鬆撰寫第一個網頁設計互動效果
07:56
點擊事件範例程式碼
00:06
使用 toggle 切換開啟或隱藏效果
04:53
教你如何除錯 jQuery
08:02
教你如何除錯 jQuery-課程補充
00:12
第二章測驗
3 questions
+ 看看還有哪些動畫效果可以使用
6 lectures 42:38
使用 Slide 設計滑動效果
09:57
使用 Fade 設計淡入淡出效果
05:29
都不喜歡?那使用 toggleClass、搭配 CSS3 Transition 自訂 CSS 效果吧!
08:41
設定 CSS 動畫小密技:overflow、CSS3 transition
08:46
jquery 鏈式寫法
04:45
第三章測驗
3 questions
+ 教你如何搭配 CSS + jQuery 各式各樣的動畫效果
11 lectures 01:05:09
preventDefault 程式碼範例
00:09
css() - 教你如何動態載入 CSS style 設定
04:05
設計下拉式收闔選單
11:00
即時放大縮小字型好簡單
06:47
fixed 固定網頁內容
06:01
使用 stop() 讓你的動畫效果更滑順
04:45
設定offcanvas左右選單切換
08:31
Animate.css 更新說明
00:53
Animate.css - 載入第三方插件 - 增添網頁動畫豐富度
07:23
第四章測驗
2 questions
+ 教你如何操控網頁元素
10 lectures 57:53
this - 教你如何操作本身元素
05:33
siblings() - 同層元素
08:01
find () - 輕鬆找到子元素內容
04:00
設計 QA折疊選單
10:10
二階層式折疊選單設計
06:34
使用 html()、text() 載入內容
04:48
click()、on() 的差別
07:18
click與on的範例程式碼
00:17
總結回顧
03:30
第五章測驗
3 questions
+ jQuery 常用小技巧
5 lectures 33:22
attr() - 動態增加 HTML 標籤屬性
09:04
remove() - 移除網頁標籤小工具
08:44
top 滑動效果
04:57
使用 fontAwesome 動態加入連結 icon-課程補充
00:26
第六章測驗
1 question
+ 第三方Plugin
12 lectures 01:15:01
使用第三方plugin需要注意的細節
06:33
使用第三方plugin需要注意的細節-課程補充
00:19
Lightbox 2 - 圖片燈箱效果 (上)
16:05
Lightbox 2 - 圖片燈箱效果 (上)-課程補充
00:23
Lightbox 2 - 圖片燈箱效果 (下)
09:53
Swiper - 輪播效果 (上)
11:05
Swiper - 輪播效果 (上)-課程補充
00:17
Swiper - 輪播效果 (中)
13:24
Swiper - 輪播效果 (下)
03:22
Swiper - 補充備註
01:57
將上面的效果試著整合在一個網頁中吧!
05:57
+ 開始喜歡 jQuery了嗎?教你如何更精進!
2 lectures 03:00
最終作業寄送變更
00:46
最終作業講解
02:14
+ 最後,你還可以往哪些方向去精進
2 lectures 00:15
網頁關鍵字速記表
00:07
如何從網路上找到適合自己的學習教材
00:07
Requirements
  • 本課程使用 Sublime Text 3 網頁編輯器進行教學
Description

你/妳好,我們是六角學院!

如果你沒有 JavaScript 基礎,但又想要快點為網頁上添增動畫效果,
那麼 jQuery 是你的最佳選擇!

我們在課堂期間提供的服務有:

  1. 無限期、無限次數地觀看線上教學影片
  2. 隨時可提問的 udemy 發問社群
  3. 每週三晚上七點半都會舉辦線上問答會,讓學生們提問網頁技術上的問題
  4. 提供二次檢視網頁程式碼

若想看我們提供的其他服務與課程,
歡迎 Google 關鍵字搜尋「六角學院」搜尋我們的粉絲頁,
瀏覽更多有關於我們的訊息!

Who this course is for:
  • 想要了解 WEB UI 究竟該如何設計網頁動畫效果的學生
  • 想要設計出超棒的網頁使用者體驗的學生
  • 不適合完全不懂 HTML、CSS 的學生