jQuery tricks

More practice with useful methods

• .addClass(), .removeClass(), and .toggleClass() - let your CSS class rules do the work!
• .hide(), .show(), and .toggle() - toggle is the smart way to do the opposite of what it's currently doing

1st Example: Hover to change me!

		// 1st Example: Changing classes

		// First declare our variable: in this example,
		// this is both the target of the event AND the class change:
		var $firstExample = $('#first-example');

		// We can write the functions separately:
		function whiteOnBlue() {
			$firstExample.removeClass('black-on-white'); //remove first class
			$firstExample.addClass('white-on-blue'); //add second
		}

		function blackOnWhite() {
			$firstExample.addClass('black-on-white');  //same in reverse:
			$firstExample.removeClass('white-on-blue');
		}

		// Hover can take 2 functions: 1st is for hover ON, second is for hover OFF:
		$firstExample.hover(whiteOnBlack, blackOnWhite);
	

2nd Example: Hover me to change the guy above!

		// 2nd Example: Even simpler with toggleClass()

		var $secondExample = $('#second-example');

		function toggleBlackAndWhite() {
			// toggleClass checks to see if that class is already on the element:
			// If it is, it removes it, if it isn't, it adds it
			$firstExample.toggleClass('black-on-white white-on-red');
			// Note that we can add/remove/toggle multiple classes: just separate with a space!
		}

		$secondExample.hover(toggleBlackAndWhite);
	

.toggleClass() API

This paragraph gets hidden and shown when you click the button below!

		// 3rd Example: just .toggle() switches display

		var $thirdExample = $('#third-example');
		var $hider = $('#hider');

		$hider.click(function () {
			$thirdExample.toggle(1000);
		});
	

.toggle() can take an optional number value (milliseconds) for animating the show/hide. .toggle() API

Also be sure to check out .fadeToggle() and .slideToggle(), which do similar things (and obviously means that there's a .fadeIn(), .fadeOut(), etc.