Day 20: More JQuery Animations and Effects
NOTE: The reason that the FAQ page from our previous class didn't work is because we were using the most current version of
jQuery. If you change the script source to version 1.6.3 (like in the book that I took the example from), it works!
Absolute positioning with CSS
Consider the following example (from last class):
Every time we click on the text Menu 2, the two input boxes below it get pushed down. If we don't want them to get pushed
down, we can make the positioning of SubMenu2 absolute.
<style>
#subMenu2{
position:absolute;
}
</style>
However, the submenu is hard to read because the text boxes behind it are visible. We can change this by setting the
background color of the submenu, like this:
background-color:white;
Document1
1
2/9/2016
Animations
In addition to the built-in effects that come with jQuery, the animate() function allows you to "animate" any CSS property that
accepts numeric values (except for colors). The argument to the animate function is an object made up of CSS property/value
pairs. Simply provide the property name and the new value that you want the property to move to.
Example
To change the opacity of a picture with the id "pic" over 2 seconds:
$('#pic').animate({opacity:.5}, 2000);
Example
Create a new HTML5 project called Page20. Create a new HTML file called Animate.html. Add the following content:
<img src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/mmjs/_images/woz.png" alt="The Woz"
id="nerd">
<p id="clickme">
Click me!
</p>
Link to the jQuery library:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">
</script>
Create an empty script with the ready function:
<script>
$(document).ready(function() {
}); // end ready
</script>
We are going to animate the picture when the user clicks on the "Click me!" paragraph. Write code that will respond to the click
event of the clickme element.
Document1
2
2/9/2016
Rollovers
A rollover is when a web site visitor moves a mouse over a picture and it changes to another picture. We can use the jQuery
hover function to implement a rollover.
Example
Create a new HTML file within the project called Rollover.html. We will need two pics to implement the rollover. Rather than
downloading them to your computer, we will just download them from my web site.
Create the content, a single image by adding the following to the body:
<img src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/woz.png" alt="nerd"
id="nerd">
Link to the jQuery library:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
Create an empty script with the ready function:
<script>
$(document).ready(function() {
}); // end ready
</script>
Add the following code to your ready function. First, create a new Image object to hold the new image:
var newPic = new Image();
Set its source (src) attribute to the new picture:
newPic.src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/gates.png";
Make a copy of the old source (src) so that we can restore the picture when the mouse moves off of the picture:
var oldSrc = $('#nerd').attr('src');
Write the hover function. The hover function should do the following.
1. When the mouse moves over the picture, change the src attribute to the src value of newPic.
2. When the mouse moves off of the picture, change the src attribute to the src value of the old picture.
Document1
3
2/9/2016
Rollovers with pre-loads
Create a new HTML file called RolloverGallery.html. Add the following content:
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery </p>
</div>
<div class="content">
<div class="main">
<h1>Rollover Images</h1>
<p>Mouse over the images below</p>
<div id="gallery">
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/blue.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/blue.jpg"
width="70" height="70" alt="blue">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/green.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/green.jpg"
width="70" height="70" alt="green">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/orange.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/orange.jpg"
width="70" height="70" alt="orange">
</a>
Document1
4
2/9/2016
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/purple.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/purple.jpg"
width="70" height="70" alt="purple">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/red.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/red.jpg"
width="70" height="70" alt="red">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/yellow.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/yellow.jpg"
width="70" height="70" alt="yellow">
</a>
</div> <!-- gallery -->
</div> <!--main -->
</div> <!-- content -->
</div> <!--wrapper -->
Preview the web page. Note that it does not depend on JavaScript to work. The links will still take us to the desired picture. It
just won't look as pretty.
Add a link to the jQuery library:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
Create an empty script with the ready function:
<script>
$(document).ready(function() {
}); // end ready
Document1
5
2/9/2016
</script>
To eliminate delays while the new image in the rollover is downloaded, we are going to write code to download the new images
immediately when the web page is loaded into the browser. We can write generic code if the names of the new images are all
related to the names of the original images in a uniform way. In this case, all of the file names are the same as the original file
names except they all have the characters "_h" appended to the file name. We want to do the following:
1. Select each image in the gallery.
2. For each image, get its src value (because the name of the new image file will be derived from it).
3. Derive the name of the new image file.
4. Create a new Image and set its source value to the new image file name (the one with the "_h" appended to the end).
5. Then, we want to define a hover function for the original image that will cause the new image to appear when the mouse
moves over the image, and the original image to reappear when the mouse moves off of the image.
The code
To select each image in the gallery:
$('#gallery img').each(function(){
// step through each image
To get the source (src) attribute (file name) of the original image:
var imgFile = new String();
imgFile = $(this).attr('src');
// save its src attribute in a string
Create a new image and set its source attribute to the new image file name:
var preloadImage = new Image();
// create a new image
preloadImage.src = imgFile.substring(0,imgFile.length-4)+'_h.jpg';
// set its src attribute
Note that JavaScript has a substring method and a length property (not a method!).
We now know the name of the original image file and the name of the new image file, so we can create the hover event
procedure. With the hover method, we pass two arguments: (1) the function (anonymous) that we want executed when the
mouse moves over the element, and (2) the function (also anonymous) that we want executed when the mouse moves off of
the element.
$(this).hover(
function(){
Document1
// mouse over: change to the colored image
6
2/9/2016
$(this).attr('src', preloadImage.src);},
function(){
// mouse leave: change back to the original
$(this).attr('src', imgFile);
Preview the web page in the browser.
Document1
7
2/9/2016
A photo gallery with effects
In this example, we will create a page where the user clicks on a thumbnail and a larger version of the picture appears.
However, we will make the appearance of the larger picture a little more interesting by adding some effects. Add a new HTML
page called GalleryWithEffects.html.
Add the following to the body:
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Gallery</h1>
<div id="gallery">
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/slide1.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/slide1.jpg" width="70"
height="70" alt="golf balls">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/slide2.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/slide2.jpg" width="70"
height="70" alt="rock wall">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/slide3.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/slide3.jpg" width="70"
height="70" alt="old course">
</a>
Document1
8
2/9/2016
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/slide4.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/slide4.jpg" width="70"
height="70" alt="tees">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/slide5.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/slide5.jpg" width="70"
height="70" alt="tree">
</a>
<a
href="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/large/slide6.jpg">
<img
src="http://old.briarcliff.edu/departments/cis/csci425/jsbook/MMJS/_images/small/slide6.jpg" width="70"
height="70" alt="ocean course">
</a>
</div>
<div id="photo"></div>
</div>
</div>
</div>
</body>
Document1
9
2/9/2016
Add the following CSS to the head:
<style>
#gallery {
float: left;
width: 90px;
margin-right: 30px;
margin-left: 10px;
border-right: white 1px dotted;
}
#gallery img {
display: inline-block;
margin: 0 0 10px 0;
border: 1px solid rgb(0,0,0);
}
#photo {
margin-left: 150px;
position: relative;
}
#photo img {
position: absolute;
}
</style>
Document1
10
2/9/2016
Tasks:
1.
2.
3.
4.
Stop the default behavior of the link.
Get the href value of the link (the address of the larger image).
Create a new image tag to insert into the page (with the href value we just got).
Fade the old image out while fading the new image in.
And add the following script:
<script>
$(document).ready(function() {
$('#gallery a').click(function(evt) {
// stop the event from occurring (branching to the new picture)
evt.preventDefault();
// get the file name of the big pic
var imgPath = $(this).attr('href');
// create a variable that holds the '#photo img' selection
var oldImage = $('#photo img');
// create a new image element
var newImage = $('<img src="' + imgPath + '">');
// hide the image so it doesn't appear immediately
newImage.hide();
// add the new photo element at the beginning of the #photo div
$('#photo').prepend(newImage);
// fade it in
newImage.fadeIn(1000);
// fade out the old one
oldImage.fadeOut(1000, function() {
$(this).remove();
});
});
});
</script>
Document1
11
2/9/2016