Common Widgets and Animation

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


Expected Duration
67 minutes

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.



  • 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

Practice: jQuery Widgets and Animation

  • create a web page containing a widget and use animation to make the web page more interactive





Multi-license discounts available for Annual and Monthly subscriptions.