Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Hiding and showing elements

From: jQuery Essential Training

Video: Hiding and showing elements

One of the hallmarks of modern web applications, if you have used the web at all recently, you have probably noticed that there is a lot of great animation and effects on these modern web pages. And it used to be that you had to use plug-ins to achieve a lot of these animation effects. Well, jQuery makes providing animation and effects easy to uses of your site. And in fact in many cases you can do some pretty neat things with just one or two lines of code.

Hiding and showing elements

One of the hallmarks of modern web applications, if you have used the web at all recently, you have probably noticed that there is a lot of great animation and effects on these modern web pages. And it used to be that you had to use plug-ins to achieve a lot of these animation effects. Well, jQuery makes providing animation and effects easy to uses of your site. And in fact in many cases you can do some pretty neat things with just one or two lines of code.

And that's going to be the subject of this chapter. So the jQuery library as I noted supplies some basic animation and effects functions to create some visual effects that are pretty common in modern web pages, such as showing and hiding elements, fading elements in and out, moving them around on the screen. There is also a basic animation function that you can use to build your own animation effects, and we will see how to do that later on in the chapter.

But first, let's just get started with some really simple animation and that involves showing and hiding elements. So showing and hiding elements are probably one of the most simple effects that you can use in jQuery. And you can exercise some pretty nice control over how elements are shown or hidden. They can happen immediately or over a specified duration of time. And you can see in the table there is a series of functions you can use. So not surprisingly, the show() functions show elements, the hide() functions hide elements.

And then there is a set of toggle() functions, and these basically do what you'd imagine, they show something if it's hidden and they hide something if it's shown. And there is a couple of different ways of doing each one of these. The most basic show() function simply displays each one of the elements that come back from a selector if they are hidden, and that just shows them. The next version though allows you to specify the speed with which things happen, and you can either pass a string like slow, normal, or fast or you can pass a number, which is a millisecond duration.

So 2000 milliseconds would be 2 seconds. And there is an optional callback that you can have jQuery call when the animation has become complete. So for example, when an element is finished showing, if you want to do some of the UI changes, you can supply a callback function that will be notified when the effect is done. The same thing for hide. There is the speed and callback function. And same thing here with toggle, the speed and callback. And this one here, the switch basically pass true or false and it either hides or shows everything based upon whether they are hidden or shown.

So now that we have seen what some of the functions are, let's jump over to the code and try some of these out. So here I am in the browser and you can see I have got a nice big blue div and I have got some buttons down here that trigger some functions. So it's currently visible, so if I click Show, nothing happens. But if I click Hide, you can see that the element goes away. If I click Show, it brings it back. And if I click Toggle, Toggle just does the opposite of whatever it currently is. That's pretty basic.

Now let's look at the code to see how that's happening. So I am going to bring this up in my editor. Before we look at the code, just take a look at the Design view. So here is the Design view, you can see here is the element, that's the div and here are the various buttons, so let's go to the Source. So down here in the Source, this is div right here. And here are each one of the buttons, and the buttons have various id's on them and up here you can see that the div has a style sheet applied to it that has some appearance.

And up here in the script, and you can see that when the browser loads the page, I am assigning some click handlers to each one of the buttons. So the Show button gets the show() function, the Hide button gets the hide() function, and so on. So what I am doing here is passing various parameters to the function. So for show, I am passing in a speed of normal but I can also pass in a speed of something like slow, right. And if I go back to the browser, I will refresh.

I am going to hide it and now when I click Show, you can see it comes in a little bit slower. But I can actually slow that down a lot more. Let's go back to the code. So instead of passing slow, what I will do is I will pass in a duration of 5 seconds, and I will pass in a callback that tells me that the animation is complete. And for the callback, I will just say alert("done showing"). So let's go back, save.

Let's go back to the browser, let's refresh. Now I am going to Hide it, and now when I click Show, you see it comes in very slowly over 5 seconds. And there is my alert that says hey, all done showing. That's pretty much it for hiding and showing elements. Let's look now at how we would fade elements in and out, another very common effect.

Show transcript

This video is part of

Image for jQuery Essential Training
jQuery Essential Training

49 video lessons · 94671 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 52s
    1. Welcome
      1m 9s
    2. Using the exercise files
      1m 43s
  2. 17m 37s
    1. What is jQuery?
      5m 19s
    2. Downloading and installing jQuery
      2m 20s
    3. Creating a simple jQuery-enabled page
      7m 12s
    4. Overview of features in jQuery
      2m 46s
  3. 59m 57s
    1. Overview of selectors and filters
      2m 9s
    2. Using basic jQuery selectors
      9m 6s
    3. Using basic jQuery filters
      8m 35s
    4. Using jQuery attribute filters
      6m 7s
    5. Child, visibility, and content filters
      9m 59s
    6. Form selectors and filters
      9m 3s
    7. Traversing documents
      9m 1s
    8. Understanding jQuery statement chaining
      1m 42s
    9. Practical example 1: Annotating page links
      4m 15s
  4. 47m 16s
    1. Creating, getting, and setting content
      5m 53s
    2. Manipulating attributes
      5m 43s
    3. Inserting content
      4m 57s
    4. Wrapping, replacing, and removing content
      5m 27s
    5. Working with CSS
      6m 19s
    6. Associating data with page elements
      9m 30s
    7. Practical example 2: Automatic TOC generator
      9m 27s
  5. 33m 6s
    1. Understanding the jQuery event handling features
      2m 4s
    2. Binding and unbinding events
      6m 23s
    3. Convenient event helper methods
      4m 40s
    4. Using the jQuery event object
      6m 21s
    5. Using miscellaneous event features
      4m 38s
    6. Practical example 3: Table striping and highlighting
      9m 0s
  6. 28m 45s
    1. Hiding and showing elements
      5m 23s
    2. Fading elements in and out
      4m 2s
    3. Sliding elements
      4m 3s
    4. Creating custom animations
      5m 58s
    5. Practical example 4: Image rotator
      9m 19s
  7. 25m 30s
    1. Introduction to jQuery UI
      3m 40s
    2. Exploring the jQuery UI widgets
      5m 24s
    3. Exploring the jQuery UI effects
      3m 58s
    4. Using the jQuery UI ThemeRoller
      4m 11s
    5. Downloading and installing jQuery UI
      8m 17s
  8. 47m 49s
    1. Overview of the sample web site
      3m 50s
    2. Using the accordion widget
      9m 14s
    3. Creating an image rotator
      10m 22s
    4. Building hover tooltips
      7m 26s
    5. Making an image selector
      9m 30s
    6. Using the Resizable effect
      7m 27s
  9. 30m 2s
    1. Working with Asynchronous JavaScript and XML (AJAX)
      10m 8s
    2. Using AJAX helpers
      4m 34s
    3. Understanding AJAX data types
      10m 14s
    4. Using global AJAX event handlers
      5m 6s
  10. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed jQuery Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.