Working with Predefined Effect Methods

Practice using JQuery predefined effect methods.

Lab 1: Interactive practice using the predefined effect methods.

Preview lab web view to practice common effect methods using Console window interactive mode.

Setup Instructions

Copy all the files from the start-01 folder to the practice folder and replace if necessary.

The lab's completed files can be found in the completed folder.

Steps:

Open the img-box.html file in your web browser.
Use the Element Inspector window to identify the best way to select the element containing the image. Write the JQuery function to select it.
The #img-box selector can be used.
```
$('#img-box');
```
Open the img-box.html file in the web browser Console drawer so you can also see the #img-box element in the Elements window.

In the order show type the following code snippets into the Console interactive area and wait for the effect to complete. Observe for each snippet the web page view and the #img-box element in the Elements window. Evaluate what is changing for the selected element.

To repeat this step, reload the img-box.html file in the web browser.
```
$('#img-box').hide();
```
```
$('#img-box').show();
```
```
$('#img-box').hide(5000);
```
```
$$('#img-box').show(2000);
```
```
$('#img-box').toggle();
```
```
$('#img-box').toggle();
```
```
$('#img-box').toggle(2000);
```
```
$('#img-box').toggle(2000);
```
Reload the img-box.html in the web browser. In the same manner as the last step evaluate what is changing for the selected element by using the following code snippets …
```
$('#img-box').fadeOut();
```
```
$('#img-box').fadeIn();
```
```
$('#img-box').fadeOut(5000);
```
```
$('#img-box').fadeOut();
```
```
$('#img-box').fadeIn(5000);
```

Reload the img-box.html in the web browser. In the same manner as the last step evaluate what is changing for the selected element by using the following code snippets …

$('#img-box').fadeTo(2000, 0);

$('#img-box').fadeIn(2000);

$('#img-box').fadeTo(2000, 1);

$('#img-box').fadeTo(2000, .5);

$('#img-box').fadeOut(2000);

$('#img-box').fadeIn(2000);

$('#img-box').fadeTo(2000, 1);

$('#img-box').hide();

$('#img-box').fadeTo(2000, 0);

$('#img-box').show();

$('#img-box').fadeTo(400, .75);

$('#img-box').hide();

$('#img-box').show();

Reload the img-box.html in the web browser. In the same manner as the last step evaluate what is changing for the selected element by using the following code snippets …

$('#img-box').slideUp('slow');

$('#img-box').slideDown('slow');

$('#img-box').slideUp();

$('#img-box').slideToggle('slow');

$('#img-box').slideDown();

$('#img-box').slideToggle(2000);

$('#img-box').show();

$('#img-box').slideToggle();

Lab 2: Information popup box effects animation and user event.

Preview information box lab web view to practice using common effect methods with the click event.

Setup Instructions

Copy all the files from the start-02 folder to the practice folder and replace if necessary.

The lab's completed files can be found in the completed folder.

Steps:

Open the info-box.html file in your web browser. Examine the information box at the bottom of the page. Consider how you can select the box and the "X" button in JQuery.
In the info-box.css file hide the info-box element. In the info-box.js file use the setTimeout function to show the info-box element once the DOM is ready. Experiment with various JQuery predefined effects methods and durations.
The following are the solutions that were choosen for use in the remaining lab steps..

JS
```
	setTimeout("$('#info-box').slideDown('slow')", 800);
```
In addition to this you might have used the hide method and the fadeOut method with optional duration values.

CSS
```
#info-box{
	background:rgb(255,255,255);
	border:4px solid rgb(0,0,0);
	border-radius:8px;
	bottom:0;
	display:none;
	left:15%;
	max-width:920px;
	margin-bottom:4px;
	position:fixed;
	right:15%;
}
```
In the info-box.js file add a click event handler function named closeInfoBoxHandler to the close button. Use the on method to trigger the handler. In the handler close the information box. Experiment with various JQuery predefined effects methods and durations to close the information box.
The following is a possible solution.
```
	setTimeout("$('#info-box').slideDown('slow')", 800)
	$('#close-info-box').on('click', closeInfoBoxHandler);/*4*/
	function closeInfoBoxHandler(){
		$('#info-box').slideUp();
	};
```