Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development jQuery

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

儘管你/妳沒有 JavaScript 基礎也適合上這門課,為網頁添加具互動性的網頁動畫效果!
Rating: 4.6 out of 54.6 (862 ratings)
2,668 students
Created by 廖洧杰 liao, 卡斯伯 六角學院, 六角 學院, Evangelin Lin, 六角助教 六角學院
Last updated 11/2020
Traditional Chinese
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 能夠掌握如何在網頁上設計互動性網頁動畫效果
  • 有辦法輕易整合別人寫好的第三方動畫插件,並套用在自己的網頁上
  • 有能力評估別人的網站究竟是用了哪些插件來設計網頁動畫效果
  • 當 jQuery 程式碼變多時,也能夠有條理地進行維護整理

Course content

10 sections • 69 lectures • 5h 55m total length

  • 六角學院線上社團
    00:32

  • Preview07:20
  • 課程最終任務說明
    00:10
  • 六角學院線上問答會資訊
    00:31
  • 初探 jQuery 強大之處(練習流程)
    00:04
  • Preview12:47
  • 下載jQuery檔案,介紹1.x與2.x的差別
    06:21
  • 下載jQuery檔案,介紹1.x與2.x的差別-課程補充
    00:22
  • 設定 jQuery 環境好簡單
    11:35
  • jQuery 環境建置範例程式碼
    00:03
  • jQuery Codepen 環境建立(無聲音版)
    00:05
  • 小叮嚀(win熱鍵提醒):使用 Sublime 插件提升寫 jQuery 效率
    00:19
  • Preview07:11
  • 第一章測驗
    2 questions

  • 選擇器:設定 CSS 般指定要操控的網頁元素
    06:23
  • 選擇器範例程式碼
    00:05
  • 輕鬆撰寫第一個網頁設計互動效果
    07:56
  • 點擊事件範例程式碼
    00:06
  • 使用 toggle 切換開啟或隱藏效果
    04:53
  • 教你如何除錯 jQuery
    08:02
  • 教你如何除錯 jQuery-課程補充
    00:12
  • Preview03:36
  • 第二章測驗
    3 questions

  • 使用 Slide 設計滑動效果
    09:57
  • 使用 Fade 設計淡入淡出效果
    05:29
  • 都不喜歡?那使用 toggleClass、搭配 CSS3 Transition 自訂 CSS 效果吧!
    08:41
  • 設定 CSS 動畫小密技:overflow、CSS3 transition
    08:46
  • jquery 鏈式寫法
    04:45
  • Preview05:00
  • 第三章測驗
    3 questions

  • Preview07:31
  • preventDefault 程式碼範例
    00:09
  • css() - 教你如何動態載入 CSS style 設定
    04:05
  • 設計下拉式收闔選單
    11:00
  • Preview08:04
  • 即時放大縮小字型好簡單
    06:47
  • fixed 固定網頁內容
    06:01
  • 使用 stop() 讓你的動畫效果更滑順
    04:45
  • 設定offcanvas左右選單切換
    08:31
  • Animate.css 更新說明
    00:53
  • Animate.css - 載入第三方插件 - 增添網頁動畫豐富度
    07:23
  • 第四章測驗
    2 questions

  • this - 教你如何操作本身元素
    05:33
  • Preview07:42
  • 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

  • attr() - 動態增加 HTML 標籤屬性
    09:04
  • remove() - 移除網頁標籤小工具
    08:44
  • top 滑動效果
    04:57
  • Preview10:11
  • 使用 fontAwesome 動態加入連結 icon-課程補充
    00:26
  • 第六章測驗
    1 question

  • 使用第三方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
  • Preview05:44

  • 最終作業寄送變更
    00:46
  • 最終作業講解
    02:14

  • 網頁關鍵字速記表
    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 的學生

Instructors

廖洧杰 liao
前端工程師
廖洧杰 liao
  • 4.7 Instructor Rating
  • 11,215 Reviews
  • 22,350 Students
  • 20 Courses

你好,我是六角學院的校長,洧杰。

我是熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。


如果你有意成為網頁設計師,前端工程師,歡迎參考我們的課程,我們是六角學院,希望能帶領您進入程式領域,線上帶您學到會 :D

 

卡斯伯 六角學院
前端設計師、前端工程師
卡斯伯 六角學院
  • 4.7 Instructor Rating
  • 11,215 Reviews
  • 22,350 Students
  • 20 Courses

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

六角 學院
Udemy 台灣合作夥伴
六角 學院
  • 4.7 Instructor Rating
  • 11,215 Reviews
  • 22,349 Students
  • 20 Courses

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

我們承諾以下事項:

  • 一次付費,課程內容沒有期限
  • 課程內容更新,無需額外付費
  • 價格調整,已付費者不受影響
  • Udemy、Mail、Facebook 等各頻道發問一定會得到回答
  • 30 天內無條件退款


Evangelin Lin
Evangelin Lin
  • 4.7 Instructor Rating
  • 2,718 Reviews
  • 8,859 Students
  • 4 Courses
六角助教 六角學院
六角學院助教
六角助教 六角學院
  • 4.7 Instructor Rating
  • 10,324 Reviews
  • 22,310 Students
  • 18 Courses

六角學院 是一所線上程式開發學習單位,目前已累積超過 15,000 名學員,讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是,如果您贊同我們的理念,歡迎加入六角。

我們將深入了解您想發展的領域,每位實習生我們都會量身打造專屬於您的舞台,並讓您實際瞭解公司營運 Know how。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.