University of California, Davis - Animation with JavaScript and jQuery 

Welcome to this Course!

Module Introduction

Introduction to jQuery

jQuery Libraries

Plugging Into jQuery Libraries

Basic jQuery Syntax

Using jQuery to Access Elements

jQuery Events

Introduction to Folding Sidebar Menus Using JS

Challenge 1 Solution

Challenge 2 Solution

Challenge 3 Solution

Challenge 4 Solution

Challenge 5 Solution

Challenge 6 Solution

Challenge 7 Solution

Challenge 8 Solution

Introduction to jQuery Sidebar Folding Navigation

Getting the Next UL

The Whole Script

JavaScript and jQuery Challenges Intro

A Note From UC Davis

Start Files: Introduction to jQuery

PDF of Presentation

Start Files: Folding Sidebar Menus with JavaScript

PDF of Presentation

Start Files: Folding Sidebar Menus with jQuery

PDF of Presentation

JavaScript and jQuery Challenge Activities

Module 1 Quiz

Module Introduction

Introduction to the jQuery Effects Library

Example 1 Continued

Example 2

Example 2: Plugin Architecture

Example 3: Fading Buttons

Example 3: Fade To

Example 4: Custom Animations - Part 1

Example 4: Custom Animations - Part 2

Doing All Animations at Once

Introduction to Tabbed Interface Using jQuery

Styling the Anchor Tags

Tab Styling and Colors

Clicking and Fading Tabs

Whole Script

Getting the CSS Ready

Making the Tabs Work

New Tab and Old Tab

Handling the Switch

Fixing a Bug

Cleaning Up the Code

Start Files: Introduction to the jQuery Effects Library

Additional Resources

PDF of Presentation

Start Files: Creating a Tabbed Interface with jQuery

PDF of Presentation

Start Files: Creating a Tabbed Interface with JavaScript

PDF of Presentation

Module 2 Quiz

Module Introduction

Basic Slider

Making the Script General

Window Load Function

Click Handler for Next Button

Next Click Handler with If Statement

Challenge Solution

Strategy for Version 2

Cloning the Unordered List

Setting the Left Position

Adding a Callback Function

Previous Button Click Handler - Part 1

Previous Button Click Handler - Part 2

Slider Using JavaScript

CSS for Slides and Adding Variables

Adding More Variables

Event Handler for the Next Button

Solution for the Previous Button Challenge

Start Files: jQuery Image Sliders

PDF of Presentation

PDF of Presentation

Start Files: JavaScript Image Sliders

PDF of Presentation

Module 3 Quiz

Module Introduction

Example Script #1 - Part 1

Example Script #1 - Part 2

Example Script #2

Example Script #3: Recursion

Converting a Slider

Putting Slides on a Timer Solution - Part 1

Putting Slides on a Timer Solution - Part 2

Project Set-up

Starting the Script

The If/Else Statement - Part 1

The If/Else Statement - Part 2

Course Summary

Start Files: Introduction to Timers & Recursion

PDF of Presentation

PDF of Presentation

Start Files: Recursive Content Rotator

PDF of Presentation

Module 4 Quiz