jQuery UI Effects

Contact Us or call 1-877-932-8228
jQuery UI Effects

Effects

jQuery UI effects mimic core jQuery effects, with the addition of animations and control over duration, easing, and other properties. As the docs state: "[e]ffects add support for animating colors and class transitions, as well as providing several additional easings [with] a full suite of custom effects... for use when showing and hiding elements or just to add some visual appeal."

Where the jQuery core addClass method, for example, adds a class to any element(s) matching the found set, the jQuery UI addClass method does the same (i.e. adds a class to the matched elements) but also animates the changes of background color, width, height, etc., over the specified duration. (Note that some properties cannot be animated: background images, for example, are changed at the end of the duration.) Note that jQuery UI animations differ from CSS3 transitions; jQuery UI animations are often used as fallbacks for older browsers that do not support CSS3 transitions.

jQuery UI effects include the following:

  • Add Class
  • Color Animation
  • Effect
  • Hide
  • Remove Class
  • Show
  • Switch Class
  • Toggle
  • Toggle Class

We will illustrate common properties of effects through the demo below, in which we toggle a div with various effects; see the jQuery UI website for full API details on effects methods.

Open the file jqy-mobile-ui/Demos/jquery-ui-effects.html in a browser and in a code editor to view the source. The page displays a div in the upper left with a red border, light-grey background, and some sample text; the controls on the right allow the user to toggle (to display or hide) the element and to choose the effect ("Blind", "Bounce", etc.) and duration of animation:

jQuery UI Effects

Code Sample:

jqy-mobile-ui/Demos/jquery-ui-effects.html
---- C O D E   O M I T T E D ----

	<script>
		$(document).ready(function() {
			$('#go').click(function() {
				var chosen_effect = $('#effect').val();
				var chosen_duration = $('#duration').val();
				if (chosen_effect != '' && chosen_duration != '') {
					$('#item').toggle(chosen_effect, parseInt(chosen_duration));
				}
			})
		});
	</script>
	<style>
		#itemcontainer {
			width:300px;
			height:300px;
			float:left;
		}
		#item {
			width:200px;
			margin:20px 0 0 20px;
			padding:20px;
			border:4px solid red;
			background:#dedede;
			border-radius: 10px;
		}
		#item h2 {
			margin:0;
			padding:0;
			background:#000;
			padding:3px 7px 3px 7px;
			color:#fff;
		}
		#controls {
			padding:20px;
		}
	</style>
</head>
<body>
<div id="itemcontainer">
	<div id="item">
		<h2>Item 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
	</div>
</div>
<div id="controls">
	<h2>Toggle</h2>
	Effect:
	<select id="effect">
		<option value="">-select-</option>
		<option value="blind">Blind</option>
		<option value="bounce">Bounce</option>
	    <option value="clip">Clip</option>
	    <option value="drop">Drop</option>
	    <option value="explode">Explode</option>
	    <option value="fold">Fold</option>
	    <option value="highlight">Highlight</option>
	    <option value="puff">Puff</option>
	    <option value="pulsate">Pulsate</option>
	    <option value="scale">Scale</option>
	    <option value="shake">Shake</option>
	    <option value="size">Size</option>
	    <option value="slide">Slide</option>
	</select>
	Duration:
	<select id="duration">
		<option value="">-select-</option>
		<option value="100">100</option>
		<option value="200">200</option>
		<option value="400">400 (default)</option>
		<option value="1000">1000</option>
		<option value="2000">2000</option>
	</select>
	<input type="button" id="go" value="Go">
</div>
</body>
</html>

The #item element sits upper left on the page with an h2 title and some greeking for content. We add a click handler for the button on the right: if the user has selected both an effect and a duration, then we toggle div#item with the selected parameters. Note that the click handler ensures that both an effect and duration have been selected, and only performs the toggle if both options are set.

jQuery UI's allows us to animate color changes, gradually changing from one color to another over a set duration. We might, for instance, change the background and foreground colors of a div as the user mouses in and out:

<div id="a">sample content</div>

...

<script>
$('div#a').hover(
	function() {
		$(this).animate({
			backgroundColor: "#000",
			color: "#fff"
		});
	},
	function() {
		$(this).animate({
			backgroundColor: "#fff",
			color: "#000"
		});
	}
)
</script>

As the user mouses into the div, the background color would change (animate) to black with white text; the reverse would occur as the user mouses out of the div.

Next we'll ask you to try out these concepts with an exercise.

Next