ICT1512

Chapter 12
Lesson 3

Working with Effects

and Animations
Exploring jQuery
Plugins
 Objectives
• You will have mastered the material in this lesson
when you can:
– Create effects and animations using jQuery methods.
– Apply jQuery Plugins, such as jQuery UI, to create
specialized animations.
 Working with Effects and Animations
• Query effects are methods that apply a visual effect to an element
selection, e.g.:
show(speed, easing, callback)
hide(speed, easing, callback)
– speed is slow, fast, or the length of the effect in milliseconds
– easing is swing (slow at the ends and faster in the middle, the default) or
linear (constant rate for the effect)
– callback is a function that is run after the effect is completed
• The hide() method reduces the size of the selected elements to 0
pixels and the opacity to 0 (transparent); the show() method
increases the elements' size to their default and their opacity to 1
(opaque)
• Other jQuery effects support the speed, easing, and callback
parameters
 Chaining Effects
• Chaining jQuery effects creates a queue in which selected elements exhibit
one effect after another in succession
• Sample effects chain:
$(selector).slideDown(500)
.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)
.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
• Callback functions can be interspersed within an effects chain so that a
function is run as soon as one effect concludes but before the next effect
begins
• Sample code that causes caption text to fade out and a different caption to
fade in:
$("div#caption").fadeOut(1000, () => {
$("div#caption").text("New caption");
})
.fadeIn(1000);
 Creating Custom Effects with animate
• jQuery animation: a visual effect accomplished by gradually
changing the values of a collection of CSS properties over a specified
time interval
• Syntax for creating an animation using the animate() method:
$(selector).animate({properties}, duration,
callback)
– properties is an object literal of CSS properties and their values
– duration is slow, fast, or a time interval in milliseconds
– callback is a function that is run once the animation is concluded
• An animation must have a starting condition to build upon, either from
the style sheet or within the jQuery code
 Creating Custom Effects with animate
• Sample code to animate a heading so it appears to grow larger and
darker:
$("h1.caption").css({
fontSize: 0,
width: 0,
opacity: 0
})
.animate({
fontSize: "2em",
width: "800px",
opacity: 1
}, 500)
• A CSS property can be changed relative to its current value using
the += and -= operators
• Property values that include units must be quoted; property values
that are numeric do not
 Creating Custom Effects with animate
• Property values can be entered using keywords
– hide: changes the CSS property value to zero
– show: restores the CSS property value to its original condition
– toggle: switches the CSS property value between zero and its
initial condition
• Sample code that toggles the font size and opacity of the
h1.caption elements between zero and their initial
condition, alternately hiding and revealing the headings:
$("h1").animate({
fontSize: "toggle"
opacity: "toggle"
}, 500);
 Controlling the Animation Queue
• Animation effects placed within a queue are run in order, with each animation
starting as soon as the preceding one finishes
• jQuery methods can be used to control the queue by delaying, halting, or
removing a queued animation
• Sample code to shift the div.box element when the mouse pointer moves over
it:
$("div.box").mouseenter( e => {
$(e.target).animate({
left: "+=20px"
}, 1000)
});
• Sample code to stop the animation when the pointer leaves the box:
$("div.box").mouseout( e => {
$(e.target).stop()
}
• The queue for each animation can be given a unique name that can be
referenced in the clearQueue(), delay(), dequeue(), finish(),
queue(), and stop() methods
 Libraries versus Frameworks

• A library is a reusable collection of code that is often

directed toward one use or purpose
– The developer "calls" on the library to perform tasks or get
information
• A framework (e.g., React.js, Vue.js, Angular.js)
encompasses all the tools you need in application
development
– Might contain several libraries and scripts plus other tools
– The framework organizes these tools for the developer and the
developer provides the code
– The code does not call on the framework; it is a part of the
framework
 Exploring jQuery Plugins
• jQuery plugins can be downloaded from the web to achieve more
advanced effects or perform other tasks
• Steps to using a jQuery plugin:
– Read the documentation and view demos
– Download the plugin files to your site or create a link to a CDN hosting the
plugin
– Edit the HTML and CSS code to load the required files for the plugin, placing
the script element for the plugin after the one for the jQuery library
– Edit the JavaScript code to utilize the plugin
• jQuery UI: the most popular jQuery plugin, which expands the
functionality of jQuery with a large collection of functions and
methods for creating specialized user interfaces
 Becoming a Professional
• Choose an area of specialization and master skills
in that area
• Learn more broad technical skills, especially
programming in HTML, CSS, and JavaScript
– Knowledge of CSS frameworks and back-end languages
(Ruby, PHP, SQL Server) is also important
• Practice coding skills and submit code samples to
GitHub
• Create a portfolio of your coding projects and place
it online for prospective employers to view