/jquery-switcher

Primary LanguageHTML

Style Switcher

  • In this exercise you will use jQuery to change the styling and behavior of a number of divs on the page.
  • Your job is to use the attached starter code with jQuery to activate the below functionality.
Change Red:
  • On click change the div below to a red background.
  • You will want to reference the .css method.
Change Green:
  • On click change the div below to a green background.
  • You will want to reference the .css method.
Change Blue:
  • On click change the div below to a blue background.
  • You will want to reference the .css method.
Make Big:
  • On click make the div below larger and have a red background.
  • You will want to reference the .addClass method
Make Small:
  • On click make the div below smaller and have a green background.
  • You will want to reference the .addClass method
Animate Div:
  • On click perform an animation of your choice on the below div using CSS3.
  • You will want to reference CSS3 transitions and transforms.
Bonus (Advanced) Create Full Screen Overlay:
  • On click create a full screen overlay div that covers the entire screen with a transparent black color.
  • On click of the overlay div, hide the overlay.
  • You may want to reference jQuery .hide() and .show().