Jquery 1.4: Animation And Effects

Front 1

How can one determine if the DOM element 'this' is currently being animated?

Back 1

$(this).is(':animated') returns true or false

Front 2

define hide() and its arguments

Back 2

hide(speed, callback)
sets css property 'display: none' on the element; if no arguments, happens instantly

speed is 'slow', 'normal', 'fast', or an integer for milliseconds (optional)

callback is a function that should be called when the animation completes (optional)

Front 3

define show() and its arguments

Back 3

hide(speed, callback)
sets css property 'display: block|inline' on the element; if no arguments, happens instantly

speed is 'slow', 'normal', 'fast', or an integer for milliseconds (optional)

callback is a function that should be called when the animation completes (optional)

Front 4

define toggle() method and its arguments

Back 4

toggle(speed, callback)
performs hide() on visible elements and show() on hidden elements


speed is 'slow', 'normal', 'fast', or an integer for milliseconds, if omitted, happexens instantly

callback is a function that should be called when the animation completes (optional)

Front 5

explain toggle(Boolean)

Back 5

if true, shows the element, if false, hides the element

Front 6

explain how to set the background color of a div to red after hiding the element

Back 6

$('div').hide('normal', function() {
$(this).css('background-color: red');
});

Front 7

explain how to hide an element on the page by slowly changing its opacity

Back 7

$('#elm').fadeOut( speed, callback )

Front 8

define fadeIn(speed, callback)

Back 8

shows an element by slowly changing its opacity

speed is 'slow', 'normal', 'fast', or an integer for milliseconds

callback is a function that should be called when the animation completes (optional)

Front 9

explain how to animate the transparency of an element to a specific opacity

Back 9

fadeTo(speed, opacity, callback)

Front 10

define the opacity argument in fadeTo(speed, opacity)

Back 10

a decimal number between 0.0 and 1.0 where 1 = 100% and 0 = 0%

Front 11

what method shows elements by slowly increasing their vertical height from zero?

Back 11

slideDown(speed, callback)

Front 12

what method hides elements by slowly decreasing their vertical height to zero?

Back 12

slideUp(speed, callback)

Front 13

define slideToggle

Back 13

performs slideDown() on hidden elements and slideUp() on visible elements

Front 14

define stop()

Back 14

this method halts any animations in progress on any elements in the matched set

Front 15

explain the parameters for stop(clearQueue, gotoEnd)

Back 15

clearQueue (boolean) if true, all items in the animation queue are canceled and removed

gotoEnd (boolean) if true, the current animation is advanced to the end point instead of stopping at current progression

Front 16

what method is called internally by slideDown(), slideUp(), hide(), and show()?

Back 16

animate()

Front 17

explain the properties parameter passed to animate(properties, duration, easing, callback)

Back 17

properties is an Object that explains the CSS properties that will be animated

attributes should use camelCase if they are multi-word

Front 18

explain the purpose of animate()

Back 18

applies a specific animation passed in the properties to the elements of the wrapped set

Front 19

explain which css properties can be animated by animate()

Back 19

the properties that can be animated are those that have a numeric value and can be logically progressed from current value to animated value

Front 20

explain how to adjust the height of an element by a relative amount instead of to a specific size

Back 20

use animate(properties), in properties, prepend += or -= to the value. Example:

$('div').animate( { height: '+=20' } );

Front 21

explain the duration parameter in animate(properties, duration, easing, callback)

Back 21

the string 'slow', 'normal', 'fast' or an integer in milliseconds explaining how fast the animation should progress

Front 22

explain the easing parameter in animate(properties, duraton, easing, callback)

Back 22

an optional function that enhances the effect by changing the way it enters or leaves view

these are usually provided by plugins

the core jQuery lib only provides 'linear' and 'swing'

Front 23

explain the properties argument in animate(properties, options)

Back 23

Contains the CSS values that will be modified as key/value pairs.

The names should be specified in CamelCase.

Since the animation takes place by adjusting the value, it needs to have a logical numeric progression.

Front 24

explain the options argument in animate(properties, options)

Back 24

Alternative way to call animate to traditional animate(properties, duration, easing, callback)

The options object can contain any of the following:
- duration
- easing
- complete (callback fxn)
- queue
- step (fxn called at each step)

Front 25

define the term easing, as used with animate functions

Back 25

describes the method the animation frames are completed, providing variations in the path and effects.