How To Do JQuery Image Cross Fades

Learn How HTML, CSS, Javascript and JQuery Work Together to Solve a Real Problem
5.0 (1 rating) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
63 students enrolled
$40
Take This Course
  • Lectures 14
  • Contents Video: 32 mins
    Other: 12 mins
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2014 English

Course Description

This is a course to learn how to cross dissolve images, also called cross fade, in a web page and at the same time learn more about using JQuery in combination with HTML, CSS and Javascript.

Designed for beginners looking to learn from practical examples. The final example is reusable in other web pages. Goal is to learn the interrelationship of HTML, CSS, Javascript and JQuery.

The HTML tags for the cross fade effect are designed so they would be independent of the demo web page. This way you can reuse the completed version in your other web pages and style as you like.

For CSS you learn to configure the position static, position absolute, position releative and z-index properties to stack images at the same location.

You will use JQuery fadeOut, JQuery next, JQuery addClass, JQuery removeClass, JQuery css, JQuery prop, JQuery show, JQuery length and JQuery first filter.

Just standard Javascript core programming skills including variables and control structures are used so it is easy to follow.

The example is built from the ground up with a mimimal starting code. This way there is no complicated starting set of code to wrap your head around before you can comfortably follow along.

The steps start with the HTML, add the CSS and then the Javascript and JQuery are added.

What are the requirements?

  • Web Browser
  • Suggested: Web Browser Developer Tools (Chrome used in Videos)
  • Basic Knowledge of HTML
  • Basic Knowledge of CSS
  • Basic Knowledge of Javascript
  • Basic Knowledge of JQuery

What am I going to get from this course?

  • Learn the Relationship of HTML, CSS, Javascript and JQuery to Cross Fade Images on a Web Page
  • Get Experience in Applying JQuery to a Common Use
  • Relate the JQuery API Documentation to the Code Created

What is the target audience?

  • Beginner to Intermediate Web Developer
  • You Are Learning HTML, CSS, Javascript and JQuery

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction To The Course
01:41

This course covers the fundamentals to create cross dissolve images, also called cross fade, in a web page and at the same time learn more about using JQuery in combination with HTML, CSS and Javascript. Designed for beginners looking to learn from practical examples. The final example is reusable in other web pages.

The HTML tags for the cross fade effect are designed so they would be independent of the demo web page. This way you can reuse the completed version in your other web pages and style as you like.

For CSS you learn to configure the position static, position absolute, position releative and z-index properties to stack images at the same location.

You will use JQuery fadeOut, JQuery next, JQuery addClass, JQuery removeClass, JQuery css, JQuery prop, JQuery show, JQuery length and JQuery first filter.

Just standard Javascript core programming skills including variables and control structures are used so it is easy to follow.

The example is built from the ground up with a mimimal starting code. This way there is no complicated starting set of code to wrap your head around before you can comfortably follow along.

The steps start with the HTML, add the CSS and then the Javascript and JQuery are added.

Article

Project files and information on project files used in lectures.

Section 2: Structure, Styling and User Interaction
05:23

The video reviews the practice HTML and CSS files already in place so you are comfortable with following the changes we are going to make.

We will layout the demo page.

Then we will layout the fade out elements and prepare them for the initial view when the page renders.

We use the CSS position and z-index properties.

For the CSS position property we see how to use the relative and absolute values to make the cross fade image positioning independent of the demo page.

For z-index we set the value needed for the image we want to see first when the page renders.

02:00

Adding JQuery and a User Interaction Button

Description:

In this step we add an interaction button.

We use it to sequentially cycle through the image cross fades.

We will install JQuery from the CDN.

Then add the button along with the Javascript code to handle the JQuery click event.

The version of JQuery as of this video recording is 1.11.0.

We use JQuery from a CDN are assuming no migration isses from version 1.9 or cross browser issues for legacy web browsers.

For the latest JQuery version CDN link:

Link http://jquery.com/download/

Scroll down to Using jQuery with a CDN and copy just line 1.

7 questions

Test your knowledge on this section.

Section 3: Applying JQuery
03:23

In this step we learn how to set up two images for using the JQuery fadeOut method.

This requires using the JQuery css and next methods.

The JQuery css method allows us to control the z-index property to assure the images are in the correct layering order.

The JQuery next method allows us to choose the sibling of the fade out image.

06:01

We begin to look at the coding for rotating in the remaining images.

We do that after the cross fade has ended.

To detect when the cross fade has ended, we use the JQuery fadeOut method's, complete handler.

The code we have completed so far used our CSS active class to select the fade out img element.

Once active img element is faded out we to move the active class to the faded over img element using the JQuery addClass and removeClass methods.

We also use the JQuery css method to set the z-index of the newly faded in img element.

6 pages

These are student notes and references for the Applying JQuery Section.

Key Links in PDF:

  • JQuery fadeOut method API reference.
  • JQuery css method API reference.
  • JQuery next method API reference.
  • JQuery addClass method API reference.
  • JQuery removeClass method API reference.

Related Links in PDF

6 questions

Test your knowledge on this section.

Section 4: Problem Solving and Testing
04:41

In our last step we were only able to cross fade our images one time through.

Now we want to work on starting back at the first image and repeat the sequence.

We are using the JQuery next method to select the fade over img element.

That worked until we faded to the last img element.

To help fix that we are going to look at the JQuery object length property.

We will use it to signal when we need to select the first img element.

And to do that we will use the JQuery selection filter called first.

Finally we will use the JQuery show method on the faded out img element.

02:30

For this video we test the impact of adding more img elements to our JQuery image cross fade project.

And we analyze how the z-index stacking order works.

02:21

In this video we look at issues created when the next button is clicked before a cross fade completes.

And to solve them for our project we will use the JQuery prop method.

5 pages

These are student notes and references for the Problem Solving and Testing Section.

Key Links in PDF:

  • JQuery show method API reference.
  • JQuery prop method API reference.
  • JQuery length property API reference.
  • JQuery :first selector API reference.

Related Links in PDF

7 questions

Test your knowledge on this section.

Section 5: Last
02:25

This step shows how to apply the Javascript Conditional If expression to the next fade to img element sibling selection process.

If you are familiar with using it, feel free to skip this presentation.

We will also compare a few advantages and disadvantages between using the traditional if block and the conditional if expression.

Article

Additional examples requested during discussions.

01:39

The HTML tags for the cross fade effect were designed so they would be independent of the demo web page. This way you can reuse the completed version in your other web pages and style as you like.

For CSS you learned to apply the position and z-index properties to stack images at the same location.

You used several JQuery methods.

These were fadeOut, next, addClass, removeClass, css, prop and show.

You also used the JQuery length property and the JQuery first filter.

We stuck to standard Javascript core programming skills including variables and control structures so it is easy to follow and apply.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Lon Hosford, Web Developer Coach and Web Site Consultant

Independent software developer with practical engineering project experience for clients such as AT&T, Avis, Bristol Myers Squibb, Ortho BioTech, Chanel, Avaya, Green Birdie Video, Aztec Learning Systems and Verizon Wireless. Lon is well known for translating client needs into useful applications.

An interesting aspect of Lon's consulting work was the creation of industry jobs that did not exist before. That lead to hiring and training college students who were taught dead technologies at a time academia was woefully behind on the paradigm shifts in personal computing, the internet and today the distributed device environment often called mobile.

Lon has taught thousands of students internet web development, animation and programming topics over two decades both privately and academically. He developed Multimedia Associated Degree program and courses for Raritan Valley Community College in the 1990s at a time when Macromedia Authorware and Director were tools. He is the founder, developer and educator for Raritan Valley Community College Web Developer Certification program also having its roots in the 1990s at the dawn of the internet. He also was a key curriculum developer and instructor for one of the Nation's first Web Developer Certification program offered through New Jersey Institute of Technology. Lon was also a technology instructor at the University of Phoenix Online.

Lon over the years has produced educational video for topics including Paradox, Cobol, Java, Jasmine, C, C++, Linux, Flash, Cocos 2d and HTML. These courses were distributed and taught in Universities internationally when global was an emerging term.

Ready to start learning?
Take This Course