How to use effects and animations - Cuyahackacuyahacka.com/215/presentations/chapter8slides.pdf · Chapter 8 Murach's JavaScript and jQuery, ... The HTML for the FAQs application

Chapter 8

Murach's JavaScript and jQuery, C8 2012, Mike Murach & Associates, Inc. Slide 1

How to use effects and animations

How to use effects and animations

Objectives


Applied 1. Use jQuery to add effects and animations to a web page.

Knowledge 1. In general terms, describe the jQuery methods for effects. 2. Describe how to stop and start a slide show that uses an interval

timer. 3. In general terms, describe how the jQuery animate method works. 4. Explain how the chaining of effect or animate methods works and

how the callback functions for these methods can affect the results. 5. Describe the use of the delay and stop methods with effects and

animations. 6. Describe the use of easings with effects and animations.

Applied

1. Use jQuery to add effects and animations to a web page.

Knowledge

1. In general terms, describe the jQuery methods for effects.

2. Describe how to stop and start a slide show that uses an interval timer.

3. In general terms, describe how the jQuery animate method works.

4. Explain how the chaining of effect or animate methods works and how the callback functions for these methods can affect the results.

5. Describe the use of the delay and stop methods with effects and animations.

6. Describe the use of easings with effects and animations.

The basic methods for jQuery effects


show()

hide()

toggle()

slideDown()

slideUp()

slideToggle()

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

show()

hide()

toggle()

slideDown()

slideUp()

slideToggle()

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

The basic syntax for all of the methods except the fadeTo method


methodName([duration][, callback])

The basic syntax for the fadeTo method fadeTo(duration, opacity[, callback])

methodName([duration][, callback])

The basic syntax for the fadeTo method

fadeTo(duration, opacity[, callback])

HTML for a heading that is animated after the web page is loaded


Temporarily under construction!

jQuery that fades the heading out over 5 seconds $("#startup_message").fadeOut(5000);

jQuery that uses chaining to fade the heading out and slide it back down $("#startup_message").fadeOut(5000).slideDown(1000);

Chaining with fadeTo methods $("#startup_message").fadeTo(5000, .2).fadeTo(1000, 1);

jQuery with a callback function that gets the same result as the chaining $("#startup_message").fadeTo(5000, .2, function() { // start callback function $(this).fadeTo(1000, 1); } // end callback function );


jQuery that fades the heading out over 5 seconds

$("#startup_message").fadeOut(5000);

jQuery that uses chaining to fade the heading out and slide it back down

$("#startup_message").fadeOut(5000).slideDown(1000);

Chaining with fadeTo methods

$("#startup_message").fadeTo(5000, .2).fadeTo(1000, 1);

jQuery with a callback function that gets the same result as the chaining

$("#startup_message").fadeTo(5000, .2,

function() { // start callback function

$(this).fadeTo(1000, 1);

} // end callback function

);

The FAQs application as the text for a heading is displayed


The HTML for the FAQs application


jQuery FAQs What is jQuery? Why is jQuery becoming so popular? Which is harder to learn: jQuery or JavaScript?

jQuery FAQs

What is jQuery?

Why is jQuery becoming so popular?

Which is harder to learn: jQuery or JavaScript?

The jQuery with slideDown and fadeOut methods


$(document).ready(function() { $("#faqs h2").toggle( function() { $(this).addClass("minus"); $(this).next().slideDown(1000); }, function() { $(this).removeClass("minus"); $(this).next().fadeOut(1000); } ); // end toggle }); // end ready

$(document).ready(function() {

$("#faqs h2").toggle(

function() {

$(this).addClass("minus");

$(this).next().slideDown(1000);

},

function() {

$(this).removeClass("minus");

$(this).next().fadeOut(1000);

}

); // end toggle

}); // end ready

The jQuery with toggleClassand slideToggle methods


$(document).ready(function() { $("#faqs h2").click( function() { $(this).toggleClass("minus"); $(this).next().slideToggle(1000); } ); // end click }); // end ready


$("#faqs h2").click(

function() {

$(this).toggleClass("minus");

$(this).next().slideToggle(1000);

}

); // end click

}); // end ready

Terms


effect animation callback function

effect

animation

callback function

A Slide Show application with fading out and fading in


The HTML for the slide show


Fishing Slide Show Casting on the Upper Kings

Fishing Slide Show

Casting on the Upper Kings

The critical CSS for the slide show


img { height: 250px; } #slides img { display: none; }

img {

height: 250px;

}

#slides img {

display: none;

}

One way to code the jQuery


$(document).ready(function() { // create an array of the slide images var image, imageCache = []; $("#slides img").each(function() { image = new Image(); image.src = $(this).attr("src"); image.title = $(this).attr("alt"); imageCache.push( image ); }); // start slide show var imageCounter = 0; var nextImage; var timer = setInterval( function () { $("#caption").fadeOut(1000);


// create an array of the slide images

var image, imageCache = [];

$("#slides img").each(function() {

image = new Image();

image.src = $(this).attr("src");

image.title = $(this).attr("alt");

imageCache.push( image );

});

// start slide show

var imageCounter = 0;

var nextImage;

var timer = setInterval(

function () {

$("#caption").fadeOut(1000);

One way to code the jQuery (continued)


$("#slide").fadeOut(1000, function() { imageCounter = (imageCounter + 1) % imageCache.length; nextImage = imageCache[imageCounter]; $("#slide").attr("src", nextImage.src).fadeIn(1000); $("#caption").text( nextImage.title).fadeIn(1000); } ); }, 3000); })

$("#slide").fadeOut(1000,

function() {

imageCounter = (imageCounter + 1)

% imageCache.length;

nextImage = imageCache[imageCounter];

$("#slide").attr("src",

nextImage.src).fadeIn(1000);

$("#caption").text(

nextImage.title).fadeIn(1000);

}

);

},

3000);

})

Another way to code the jQuery


$(document).ready(function() { var nextSlide = $("#slides img:first-child"); var nextCaption; var nextSlideSource; // start slide show setInterval( function () { $("#caption").fadeOut(1000); $("#slide").fadeOut(1000, function () { if (nextSlide.next().length == 0) { nextSlide = $("#slides img:first-child"); } else { nextSlide = nextSlide.next(); }


var nextSlide = $("#slides img:first-child");

var nextCaption;

var nextSlideSource;

// start slide show

setInterval(

function () {



function () {

if (nextSlide.next().length == 0) {

nextSlide =

$("#slides img:first-child");

}

else {

nextSlide = nextSlide.next();

}

Another way to code the jQuery (continued)


nextSlideSource = nextSlide.attr("src"); nextCaption = nextSlide.attr("alt"); $("#slide").attr("src", nextSlideSource).fadeIn(1000); $("#caption").text( nextCaption).fadeIn(1000); } ) }, 3000); })

nextSlideSource =

nextSlide.attr("src");

nextCaption = nextSlide.attr("alt");


nextSlideSource).fadeIn(1000);

$("#caption").text(

nextCaption).fadeIn(1000);

}

)

},

3000);

})

jQuery for stopping and restarting a slide


$(document).ready(function() { var nextSlide = $("#slides img:first-child"); var nextCaption; var nextSlideSource; // the function for running the slide show var runSlideShow = function() { $("#caption").fadeOut(1000); $("#slide").fadeOut(1000, function () { if (nextSlide.next().length == 0) { nextSlide = $("#slides img:first-child"); } else { nextSlide = nextSlide.next(); } nextSlideSource = nextSlide.attr("src"); nextCaption = nextSlide.attr("alt");


var nextSlide = $("#slides img:first-child");

var nextCaption;

var nextSlideSource;

// the function for running the slide show

var runSlideShow = function() {



function () {

if (nextSlide.next().length == 0) {

nextSlide =

$("#slides img:first-child");

}

else {

nextSlide = nextSlide.next();

}

nextSlideSource = nextSlide.attr("src");

nextCaption = nextSlide.attr("alt");

jQuery (continued)


$("#slide").attr("src", nextSlideSource).fadeIn(1000); $("#caption").text( nextCaption).fadeIn(1000); } ) } // start slide show var timer1 = setInterval(runSlideShow, 3000); // starting and stopping the slide show $("#slide").toggle( function() { clearInterval(timer1); }, function() { timer1 = setInterval(runSlideShow, 3000); } ) })


nextSlideSource).fadeIn(1000);

$("#caption").text(

nextCaption).fadeIn(1000);

}

)

}

// start slide show

var timer1 = setInterval(runSlideShow, 3000);

// starting and stopping the slide show

$("#slide").toggle(

function() {

clearInterval(timer1);

},

function() {

timer1 = setInterval(runSlideShow, 3000);

}

)

})

The basic syntax for the animate method


animate({properties}[, duration][, callback])

An animated heading that is moving into the faqs section

The CSS for the h1 heading #faqs h1 { position: relative; left: -175px; font-size: 75%; opacity: .2; }

animate({properties}[, duration][, callback])

An animated heading that is moving into the faqs section

The CSS for the h1 heading

#faqs h1 {

position: relative;

left: -175px;

font-size: 75%;

opacity: .2;

}

An animate method for the h1 heading


Without a callback function $("#faqs h1").animate( { fontSize: "275%", opacity: 1, left: 0 }, 2000 ); // end animate

With a callback function $("#faqs h1").animate( { fontSize: "275%", opacity: 1, left: "+=175" }, 2000, function() { $("#faqs h2").next().fadeIn(1000).fadeOut(1000); } ); // end animate

Without a callback function

$("#faqs h1").animate(

{ fontSize: "275%", opacity: 1, left: 0 }, 2000

); // end animate

With a callback function


{ fontSize: "275%", opacity: 1, left: "+=175" },

2000,

function() {

$("#faqs h2").next().fadeIn(1000).fadeOut(1000);

}

); // end animate

A heading with two animations started by its click event


Chained animations


$("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000 ) .animate( { fontSize: "175%", left: "-=275" }, 1000 ) }); // end click

$("#faqs h1").click(function() {

$(this).animate(

{ fontSize: "650%", opacity: 1,

left: "+=275" }, 2000 )

.animate(

{ fontSize: "175%", left: "-=275" },

1000 )

}); // end click

Queued animations


$("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000 ); $(this).animate( { fontSize: "175%", left: "-=275" }, 1000 ); }); // end click


$(this).animate(

{ fontSize: "650%", opacity: 1,

left: "+=275" }, 2000 );

$(this).animate(

{ fontSize: "175%", left: "-=275" }, 1000 );

}); // end click

An animation with a second animation in its callback function


$("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000, function() { $(this).animate( { fontSize: "175%", left: "-=275" }, 1000 ) } )} // end function ); // end click


$(this).animate(


2000,

function() {

$(this).animate(

{ fontSize: "175%", left: "-=275" }, 1000

)

}

)} // end function

); // end click

The delay and stop methods


Method Description delay(duration) Delay the start of the next animation in the

queue. stop([clearQueue] Stop the current animation for the selected [,jumpToEnd]) element. If the first parameter is set to true, the queue is cleared. If the second parameter is set to true, the current animation is completed immediately.

MethodDescription

delay(duration)Delay the start of the next animation in the queue.

stop([clearQueue]Stop the current animation for the selected [,jumpToEnd])element. If the first parameter is set to true, the queue is cleared. If the second parameter is set to true, the current animation is completed immediately.

HTML for a heading that is displayed when the web page is loaded



jQuery that fades the heading out after 5 seconds $("#startup_message").delay(5000).fadeOut(1000);


jQuery that fades the heading out after 5 seconds

$("#startup_message").delay(5000).fadeOut(1000);

Thumbnail images with queues that are still running


The HTML for the thumbnail images

Stopping the queued animations before starting a new one


$("#image_list a").hover( function(evt) { $(this).stop(true).animate( { top: 15 }, "fast"); }, function(evt) { $(this).stop(true).animate( { top: 0 }, "fast"); } ); // end hover

$("#image_list a").hover(

function(evt) { $(this).stop(true).animate(

{ top: 15 }, "fast"); },

function(evt) { $(this).stop(true).animate(

{ top: 0 }, "fast"); }

); // end hover

The syntax for using easing with effects and animations


The syntax for all the basic methods except fadeTo methodName([duration][, easing][, callback])

The syntax for the fadeTo method fadeTo(duration, opacity[, easing][, callback])

The syntax for the basic animate method animate({properties}[, duration][, easing][, callback])

The syntax for all the basic methods except fadeTo

methodName([duration][, easing][, callback])

The syntax for the fadeTo method

fadeTo(duration, opacity[, easing][, callback])

The syntax for the basic animate method

animate({properties}[, duration][, easing][, callback])

A script element for getting the jQuery UI library from the Google CDN


Two easings used by the FAQs application


$("#faqs h2").toggle( function() { $(this).toggleClass("minus"); $(this).next().slideDown(1000, "easeOutBounce"); }, function() { $(this).toggleClass("minus"); $(this).next().slideUp(1000, "easeInBounce"); } ); // end toggle

$("#faqs h2").toggle(

function() {


$(this).next().slideDown(1000, "easeOutBounce");

},

function() {


$(this).next().slideUp(1000, "easeInBounce");

}

); // end toggle

Two easings for an animated heading


$("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000, "easeInExpo" ) .animate( { fontSize: "175%", left: "-=275" }, 1000, "easeOutExpo" ); }); // end click


$(this).animate(


2000,

"easeInExpo" )

.animate(

{ fontSize: "175%", left: "-=275" },

1000,

"easeOutExpo" );

}); // end click

The advanced syntax for the animate method


animate({properties}, {options})

The options for the advanced syntax duration

easing

complete

step

queue

specialEasing

animate({properties}, {options})

The options for the advanced syntax

duration

easing

complete

step

queue

specialEasing

An animate method with the advanced syntax


$("#faqs h1").animate( { fontSize: "650%", opacity: 1, left: "+=175" }, { duration: 2000, specialEasing: { fontSize: "easeInExpo", left: "easeOutExpo" }, complete: function() { $("#faqs h2").next().fadeIn( 1000).fadeOut(1000); } } ); // end animate



{ duration: 2000,

specialEasing: { fontSize: "easeInExpo",

left: "easeOutExpo" },

complete: function() {

$("#faqs h2").next().fadeIn(

1000).fadeOut(1000); }

}

); // end animate

How to provide easings by property with the basic syntax


$("#faqs h1").animate( { fontSize: ["650%", "easeInExpo"], opacity: [1, "swing"], left: ["+=275", "easeOutExpo"] }, 2000 ); // end animate


{ fontSize: ["650%", "easeInExpo"],

opacity: [1, "swing"],

left: ["+=275", "easeOutExpo"] },

2000

); // end animate

The methods for working with animation queues


Method Description queue([name]) Get the queue for the selected

element. queue([name], newQueue) Replace the queue for the selected

element with a new queue. queue([name], callback) Add a new function (callback) to the

end of the queue for the selected element.

dequeue([name]) Run the next item in the queue for the selected element.

clearQueue([name]) Remove all items that havent yet been run from the queue.

MethodDescription

queue([name])Get the queue for the selected element.

queue([name], newQueue)Replace the queue for the selected element with a new queue.

queue([name], callback)Add a new function (callback) to the end of the queue for the selected element.

dequeue([name])Run the next item in the queue for the selected element.

clearQueue([name])Remove all items that havent yet been run from the queue.

Terms


properties map queue easing

properties map

queue

easing

A Carousel application


The HTML for the Carousel application


View our Books // 5 more li elements that contain images

View our Books

// 5 more li elements that contain images

The HTML for the Carousel application (cont.)


The critical CSS for the Carousel application


#display_panel { width: 300px; overflow: hidden; float: left; height: 125px; } #image_list { position: relative; left: 0px; // required for IE, not for Firefox width: 900px; list-style: none; } #image_list li { float: left; width: 100px; } #image_list li img { width: 95px; }

#display_panel {

width: 300px;

overflow: hidden;

float: left;

height: 125px;

}

#image_list {

position: relative;

left: 0px; // required for IE, not for Firefox

width: 900px;

list-style: none;

}

#image_list li {

float: left;

width: 100px;

}

#image_list li img {

width: 95px;

}

The jQuery for the Carousel application


$(document).ready(function() { var slider = $("#image_list"); // slider = ul element var leftProperty, newleftProperty; // the click event handler for the right button $("#right_button").click(function() { // get value of current left property leftProperty = parseInt(slider.css("left")); // determine new value of left property if (leftProperty - 300

The jQuery for the Carousel application (cont.)


// the click event handler for the left button $("#left_button").click(function() { // get value of current left property leftProperty = parseInt(slider.css("left")); // determine new value of left property if (leftProperty < 0) { newLeftProperty = leftProperty + 300; } else { newLeftProperty = 0; } // use animate to change the left property slider.animate( {left: newLeftProperty}, 1000); }); // end click }); // end ready

// the click event handler for the left button

$("#left_button").click(function() {

// get value of current left property

leftProperty = parseInt(slider.css("left"));

// determine new value of left property

if (leftProperty < 0) {

newLeftProperty = leftProperty + 300;

}

else {

newLeftProperty = 0;

}

// use animate to change the left property

slider.animate( {left: newLeftProperty}, 1000);

}); // end click

}); // end ready

Extra 8-1: Modify an Image Swap application


Fade the caption and image out and in.

Fade the caption and image out and in.

Extra 8-2: Modify a Carousel application


Use animation to display an enlarged image when an image in the carousel is clicked.

Use animation to display an enlarged image when an image in the carousel is clicked.

10/28/15 3:43 PMChapter 08 Word slides.docxSlide 1

Short 8-1: Add effects to the Image Gallery app


Estimated time: 5 to 10 minutes.

Use a sliding motion to hide and display images.

Estimated time: 5 to 10 minutes.

Use a sliding motion to hide and display images.

Short 8-2: Debug a Slide Show application


Estimated time: 5 to 10 minutes...if you can find the problem.

Estimated time: 5 to 10 minutes...if you can find the problem.

Chapter 8ObjectivesThe basic methods for jQuery effectsThe basic syntax for all of the methods except the fadeTo methodHTML for a heading that is animated after the web page is loadedThe FAQs application as the text for a heading is displayedThe HTML for the FAQs applicationThe jQuery with slideDown and fadeOut methodsThe jQuery with toggleClass and slideToggle methodsTermsA Slide Show application with fading out and fading inThe HTML for the slide showThe critical CSS for the slide showOne way to code the jQueryOne way to code the jQuery (continued)Another way to code the jQueryAnother way to code the jQuery (continued)jQuery for stopping and restarting a slide jQuery (continued)The basic syntax for the animate methodAn animate method for the h1 headingA heading with two animations started by its click eventChained animationsQueued animationsAn animation with a second animation in its callback functionThe delay and stop methodsHTML for a heading that is displayed when the web page is loadedThumbnail images with queues that are still runningStopping the queued animations before starting a new oneThe syntax for using easing with effects and animationsA script element for getting the jQuery UI library from the Google CDNTwo easings used by the FAQs applicationTwo easings for an animated headingThe advanced syntax for the animate methodAn animate method with the advanced syntaxHow to provide easings by property with the basic syntaxThe methods for working with animation queuesTermsA Carousel applicationThe HTML for the Carousel applicationThe HTML for the Carousel application (cont.)The critical CSS for the Carousel applicationThe jQuery for the Carousel applicationThe jQuery for the Carousel application (cont.)Extra 8-1: Modify an Image Swap applicationExtra 8-2: Modify a Carousel applicationShort 8-1: Add effects to the Image Gallery appShort 8-2: Debug a Slide Show application

Documents

How to use effects and animations - Cuyahackacuyahacka.com/215/presentations/chapter8slides.pdf · Chapter 8 Murach's JavaScript and jQuery, ... The HTML for the FAQs application