Course details

Common Widgets and Animation

Common Widgets and Animation

Target Audience
Expected Duration
Lesson Objectives
Course Number
Expertise Level

jQuery and jQuery UI provide a large assortment of very useful widgets and animation tools that can be used to make a very interactive web page. In this course you will learn about some of the most common and useful widgets as well as how jQuery and jQuery UI can help animate the elements of your web page.

Target Audience
Any web developer who has some experience with HTML, JavaScript, and CSS


Expected Duration (hours)

Lesson Objectives

Common Widgets and Animation

  • start the course
  • create a dialog popup box
  • add custom buttons to a dialog popup box
  • create and use a modal dialog box
  • use and configure a datepicker widget
  • create a tabs widget with multiple tabs
  • add tabs dynamically to a tabs widget
  • open a specific tab on page refresh or load
  • work with the autocomplete widget
  • use AJAX to provide data for a dynamic autocomplete widget
  • use fadeIn(), fadeOut(), fadeTo(), and fadeToggle() to fade elements
  • add a sliding motion to an element using slideDown(), slideUp(), and slideToggle()
  • use animate() to animate an element and set the speed of the animation
  • stop an animation before it has completed
  • determine when an animation has completed before taking additional action on the element
  • use color animations to animate color properties of an element
  • use the Drop, Explode, Puff, Pulsate, and Fold effects on elements
  • use the Blind, Bounce, Clip, Scale, and Shake effects on elements
  • transfer the outline of one element to another element to create a visual interaction between the elements
  • work with queues to build a set of functions to run on an element
  • create a web page containing a widget and use animation to make the web page more interactive
  • Course Number:

    Expertise Level