5021

GRAF 5021 - JQuery

week 3

Today:

Change the opacity of an image
Image Slides
Create a rollover with jQuery

Opacity animation

example

download this site

download, unzip, and define as your local folder in DW

open the index.html, and link the external CSS and jquery file to the page

HTML:

Insert a div in the body, inside the "contentTop" div

Give this new div the class "recentWork"

Insert the three images provided...your code should look like this:

<h1>Our latest work</h1>
<div class="recentWork">
<img src="images/imgSlide1.png" width="282" height="163" />
<img src="images/imgSlide2.png" width="282" height="163" />
<img src="images/imgSlide3.png" width="282" height="163" />
</div>

to add a bit of space between the images, create the following style:

.recentWork img { margin-right: 5px; }

JavaScript:

Create a new js, save it into your local root as scripts.js

Attached the file to the head of your document:

Start with your document ready:

$(function() {
});

Then add:

$(function() {
    $('.recentWork img').animate({
        "opacity" : .5
    });
});

- this will get any images in the div classed "recentWork", and change the opacity to 50% (animate works a little more consistently than .css

if you run this, you'll see that the images have changed to 50% opacity

Now to bring them back to 100% opacity:

$(function() {
    $('.recentWork img').animate({
        "opacity" : .5
    });

    $('.recentWork img').hover(function() {
        $(this).animate({ "opacity" : 1 });

});
});

test it now...when you hover the image returns to 100% opacity - but does nothing when you mouse out

Add the following to return the image to 50% opacity on mouse out:

$(function() {
    $('.recentWork img').animate({
        "opacity" : .5
    });
    $('.recentWork img').hover(function() {
        $(this).animate({ "opacity" : 1 });
    }, function () {
        $(this).animate({ "opacity" : .5 });
});
});

test it...now it returns to 50% opacity on mouse out.

One big problem, if you run your mouse over the images, over and over, the animations build up, and continue to run...to fix this we need to tell the animation to stop (even if it hasn't started yet!):

$(function() {
    $('.recentWork img').animate({
        "opacity" : .5
    });
    $('.recentWork img').hover(function() {
        $(this).stop().animate({ "opacity" : 1 });
    }, function () {
        $(this).stop().animate({ "opacity" : .5 });
});
});

that's it

Lesson 2 - Image Slides

example

download this site

download, unzip, and define as your local folder in DW

open the index.html, and link the external CSS and jquery file to the page

HTML - Image Slides

I've left a spot for the 3 div's that will contain the sliding images.

locate the "contentTop" div...and within the type:

Our Recent Work

format this as an h1 element

Now you'll need to create the three div's and insert the 2 images for each.

After "Our Recent Work" insert the first div, with the id "recentWork"

Insert the image "imgSlide1b.png", then "imgSlide1.png"

Go to the code...and set the class of imgSlide1.png to front. This is not a CSS class we've created or will create, we're going to reference this in the js code.

This is what your "contentTop" code should look like so far:

<div id="contentTop">
    <h1>Our latest work</h1>

    

    <div class="recentWork">
    <img src="images/imgSlide1b.png" width="282" height="163" />
    <img src="images/imgSlide1.png" width="282" height="163" class="front" />
    </div>


</div>

Now add the other two divs...you can copy and paste if you like:

<div class="recentWork">
    <img src="images/imgSlide1b.png" width="282" height="163" />
    <img src="images/imgSlide1.png" width="282" height="163" class="front" />
    </div>

    <div class="recentWork">
    <img src="images/imgSlide2b.png" width="282" height="163" />
    <img src="images/imgSlide2.png" width="282" height="163" class="front" />
    </div>

    <div class="recentWork">
    <img src="images/imgSlide3b.png" width="282" height="163" />
    <img src="images/imgSlide3.png" width="282" height="163" class="front" />
    </div>

Now that the html is done, we'll work on the CSS

CSS for Image Slides

Create a new class named .recentWork

.recentWork { width: 282px; margin-right: 4px; float: left; overflow: hidden; position: relative; height: 163px; }

- set the width and height to the same size as the image
- position relative is very important, it plays a role in the absolute positioning of the child elements
- overflow is set to hidden so that when the image moves up and down, you won't see it "outside" of the div
- margin and flow are strictly for design/layout

and make a class for the images located inside of the recentWork div's:

.recentWork img { position: absolute; left: 0px; top: 0px; }

- we need to set the position to top - left so that when we tell it to move/animate, it know from where
- absolute position is based on the relative position of the recentWork div

and of course, none of this works without the JavaScript...

JS for Image Slides

Create a new js, save it into your local root as scripts.js

Attached the file to the head of your document:

Start with your document ready:

$(function() {
});

Then add:

$(function() {
    $('.recentWork').hover(function() {
        $(this).children('.front').stop().animate({"top" : '300px'}, 700);
     });
});

- this gets the "recentWork" divs, and says when hover, the child element with the class "front", stop, then animate top 300px in 700 milliseconds

Now to animate it back up:

$(function() {
    $('.recentWork').hover(function() {
        $(this).children('.front').stop().animate({"top" : '300px'}, 700);
     }, function() {
        $(this).children('.front').stop().animate({"top" : '0'}, 400);
     });
});

test it!

Lesson 3 - Swap Image

example

download this site

download, unzip, and define as your local folder in DW

put a div after the the start of tag "topNav", set the id to "login"

insert the image "login.png" and in code view, add the class "swapImage"...your code should look like this:

create the style for the div:

#login { float: left; }

Now on to the js...

open the existing scripts.js file, which looks like this:

now add this to swap the image src:

$(function() {
    $('.recentWork img').animate({
        "opacity" : .5
    });
    $('.recentWork img').hover(function() {
        $(this).stop().animate({ "opacity" : 1 }, 1000);
    }, function () {
        $(this).stop().animate({ "opacity" : .5 }, 100);
    });
    $(".swapImage").hover(function() {
        $(this).attr("src", "images/login2.png");
    }, function () {
        $(this).attr("src", "images/login.png");
    });
});

- we're saying get the swapImage class, and on hover change the image src to login2.png
- then, of course we need to swap it back

Save this site for next weeks lesson.