Web Development with jQuery (2015)

Part I. The jQuery API

Chapter 8. Animation and Easing Effects

jQuery does a lot to make the life of a developer easier, but jQuery does not stop at making it easier to traverse the DOM, or manipulate, or iterate, or all the other cool things you've learned about in the preceding chapters. It also gives you the tools to make your documents look polished, professional, and sophisticated via animation and a plethora of special effects. This chapter presents how to work with the API that jQuery provides for dealing with effects.

As you've seen in examples in previous chapters, jQuery can toggle the display of elements between hidden and displayed states using its show() and hide() methods. What you may not have already learned is that those methods also have the ability to animate between hidden and displayed states via a short animation.

jQuery also gives you the ability to animate an element between hidden and displayed states by animating an element's height, in addition to the ability to fade elements on and off via an animation of an element's opacity, all with a simple and trivial function call.

Finally, jQuery also has the cability to animate objects in your document between arbitrary numeric styles, which gives you the ability to create your own, custom animations.

Showing and Hiding Elements

jQuery provides three methods for showing and hiding elements: show(), hide(), and toggle(). You've seen examples of show() and hide() in previous chapters. By default, these three methods simply make an object visible or invisible by toggling that element's CSSdisplay property. These methods make it easier to turn elements on or off. What you haven't learned about these properties yet is that you can also supply arguments to these methods that customize an animation of the transition from visible to invisible or vice versa via easings. Easings are algorithms that control how an animation progresses over time. For example, an animation may begin quickly, and as time goes on, the transformation may become slower or faster. An algorithm determines how time is applied to the animation. Easings may be visualized as a single line on a graph that represents how time is altered and applied throughout the duration of an animation. Easings may also alter the animation. For example, an easing that includes bouncing can produce a transition in which the transformation of an object appears to bounce. When animating the width of an object, a bounce easing is apparent as the width becomes smaller, then snaps larger, and then snaps smaller again, giving the appearance of bouncing. The easing in this case applies an algorithm that controls the animation of width over time, with points in time where the animation temporarily goes backward and then forward again until the duration is met to produce the appearance of bouncing.

These easing effects are all prepackaged into presets that you can utilize in your scripts by calling a method in jQuery with an argument or option that references the name of the easing preset. Not all the easing presets are included in the default jQuery download; only 'linear' and 'swing' are included. Additional easings must be downloaded separately from the jQuery UI website at www.jqueryui.com/download/. The examples in this chapter include jQuery UI with all optional easings and UI components included. The jQuery UI file is included in the source code materials download for this book available for free from www.wrox.com/go/webdevwithjquery and is named jQueryUI.js.

Potential animations include fading, sliding, swinging, and a whole suite of additional effects. In addition to the animations built in and included with jQuery, you can create your own completely custom animations using jQuery's animate() method, as discussed in the section “Custom Animation.”

You can also supply a callback function to any of jQuery's animation methods, which is executed when animation completes. And if that doesn't provide enough flexibility, you can also supply a configuration object that supports a comprehensive list of options that cover additional callback function scenarios, as well as tweaking all aspects of the animation.

The following example demonstrates how to animate show and hide element transitions using jQuery's show(), hide(), and toggle() methods. The toggle() method, as the name implies, encompasses both show() and hide() functionality in a single method, switching back and forth depending on whether the element is visible when animation commences.

<!DOCTYPE HTML>

<head>

<title>Animation and Effects</title>

</head>

<body>

<h4>Integer Feugiat Fringilla</h4>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Ut vestibulum ornare augue. Fusce non purus vel libero

mattis aliquet. Vivamus interdum consequat risus. Integer

feugiat fringilla est. Vivamus libero. Vestibulum

imperdiet arcu vitae nunc. Nunc est velit, varius sed,

faucibus quis.

</p>

</div>

<legend>Animation Options</legend>

<div>

Easing:

</label>

<select name='exampleAnimationEasing'

id='exampleAnimationEasing'>

<option value='linear'>linear</option>

<option value='swing'>swing</option>

<option value='easeInQuad'>easeInQuad</option>

<option value='easeOutQuad'>easeOutQuad</option>

<option value='easeInOutQuad'>easeInOutQuad</option>

<option value='easeInCubic'>easeInCubic</option>

<option value='easeOutCubic'>easeOutCubic</option>

<option value='easeInOutCubic'>easeInOutCubic</option>

<option value='easeInQuart'>easeInQuart</option>

<option value='easeOutQuart'>easeOutQuart</option>

<option value='easeInOutQuart'>easeInOutQuart</option>

<option value='easeInQuint'>easeInQuint</option>

<option value='easeOutQuint'>easeOutQuint</option>

<option value='easeInOutQuint'>easeInOutQuint</option>

<option value='easeInExpo'>easeInExpo</option>

<option value='easeOutExpo'>easeOutExpo</option>

<option value='easeInOutExpo'>easeInOutExpo</option>

<option value='easeInSine'>easeInSine</option>

<option value='easeOutSine'>easeOutSine</option>

<option value='easeInOutSine'>easeInOutSine</option>

<option value='easeInCirc'>easeInCirc</option>

<option value='easeOutCirc'>easeOutCirc</option>

<option value='easeInOutCirc'>easeInOutCirc</option>

<option value='easeInElastic'>easeInElastic</option>

<option value='easeOutElastic'>easeOutElastic</option>

<option value='easeInOutElastic'>easeInOutElastic</option>

<option value='easeInBack'>easeInBack</option>

<option value='easeOutBack'>easeOutBack</option>

<option value='easeInOutBack'>easeInOutBack</option>

<option value='easeInBounce'>easeInBounce</option>

<option value='easeOutBounce'>easeOutBounce</option>

<option value='easeInOutBounce'>easeInOutBounce</option>

</select>

Duration:

</label>

<input type='range'

value='5000'

min='100'

max='10000'

step='100'

name='exampleAnimationDuration'

id='exampleAnimationDuration' />

<input type='submit'

name='exampleAnimationShow'

id='exampleAnimationShow'

value='Show' />

<input type='submit'

name='exampleAnimationHide'

id='exampleAnimationHide'

value='Hide' />

<input type='submit'

name='exampleAnimationToggle'

id='exampleAnimationToggle'

value='Toggle' />

</div>

</fieldset>

</form>

</body>

</html>

The following style sheet is applied to the preceding markup document:

body {

font: 12px 'Lucida Grande', Arial, sans-serif;

background: #fff;

color: rgb(50, 50, 50);

}

div#exampleDialogCanvas {

height: 400px;

position: relative;

overflow: hidden;

}

div#exampleDialog {

box-shadow: 0 7px 100px rgba(0, 0, 0, 0.7);

border-radius: 4px;

width: 300px;

height: 200px;

position: absolute;

padding: 10px;

top: 50%;

left: 50%;

z-index: 1;

margin: -110px 0 0 -160px;

background: #fff;

}

div#exampleDialog h4 {

border: 1px solid rgb(50, 50, 50);

background: lightblue;

border-radius: 4px;

padding: 5px;

margin: 0 0 10px 0;

}

div#exampleDialog p {

margin: 10px 0;

}

input#exampleAnimationDuration {

vertical-align: middle;

}

The following script demonstrates the animations provided by jQuery's show(), hide(), and toggle() methods:

$(document).ready(

function()

{

var animating = false;

$('input#exampleAnimationShow').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').show(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationHide').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').hide(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationToggle').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').toggle(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationDuration').change(

function()

{

$(this).attr('title', $(this).val());

}

);

}

);

The preceding example is Example 8-1 in the source code download materials. Figure 8.1 shows the results of loading up Example 8-1.html in a browser.

In Example 8-1, you created an application that allows you to test the most-used aspects of the show(), hide(), and toggle() methods. This includes testing every possible type of easing offered in both default jQuery and the various easing extensions offered as part of jQuery UI. All the easings offered by jQuery are specified in the <select> element that you created to make it easy to test each easing.

Along with easing, you also provide a duration to each method that is provided by the <input> range element. The duration argument is specified in milliseconds; 1,000 milliseconds equal 1 second. Aside from providing an integer value representing the number of milliseconds, you can also provide a duration-preset string. jQuery offers three duration-preset strings: 'slow', 'normal', and 'fast'. If no duration is specified, the default duration is the 'normal' preset.

The script that you created begins by setting up a variable to keep track of whether an animation is in progress. The purpose of this variable is to prevent multiple animations from backing up and occurring one after another by repeatedly clicking any of the buttons while an animation is in progress. When an animation is initiated, the animating variable is set to true, which prevents additional animations from occurring while that initial animation is in progress. When an animation completes, the callback function provided to each method is executed and the animating variable is reset to false, which allows a new animation to take place.

$(document).ready(

function()

{

var animating = false;

Figure 8.1

Next, you set up a click() event on the <input> element with the id name exampleAnimationShow.

$('input#exampleAnimationShow').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').show(

duration,

easing,

function()

{

animating = false;

}

);

}

);

The first thing that happens when a click takes place is the event.preventDefault() method. This prevents the <form> from submitting to the URL specified in the action attribute.

animating = true;

You then check the animating variable to ensure that an animation is not in progress. If the value of the animating variable is false, then the next statement dependent on that condition is executed. If the value of the animating variable is true, then nothing happens and the callback function supplied to the click() method concludes execution.

var easing = $('select#exampleAnimationEasing').val();

The value of the <select> element with id name exampleAnimationEasing is assigned to the easing variable, which goes on to be provided in the easing argument of the show() method.

var duration = parseInt($('input#exampleAnimationDuration').val());

Likewise, the value of the <input> element with id name exampleAnimationDuration is converted to an integer data type with parseInt() and assigned to the duration variable. The duration variable then goes on to stand in for the duration argument of the show() method.

$('div#exampleDialog').show(

duration,

easing,

function()

{

animating = false;

}

);

The show() method is applied to the <div> with the id name exampleDialog.

All the arguments provided to the show() method are optional. If the show() method is called with no arguments, no animation takes place and only the CSS display property is set to display the element; for a <div> element the display property would be set to block. If only the duration argument is specified, the action of displaying the element is animated via the provided duration with the default easing 'swing'.

The callback function provided to the show() method is executed when the animation has completed. In this case, the callback function resets the value of the animating variable to false so that additional animations can take place.

The remainder of the script repeats the logic of the click() event assigned to the <input> element with the id name exampleAnimationShow on two additional <input> elements. The <input> with id name exampleAnimationHide receives a similar click() event that swaps out the show() method for the hide() method. Likewise, the <input> element with id name exampleAnimationToggle receives a click() event that swaps out the show() method for the toggle() method, which completes this demonstration of the show(), hide(), and toggle()methods.

Sliding Elements

jQuery also provides the ability to animate an element by sliding. Sliding in jQuery is animating an element's height. Sliding down animates an element's height from nothing to its normal height. Sliding up animates an element's height from its normal height to nothing. These two actions are accomplished using the slideDown(), slideUp(), and slideToggle() methods.

Sliding is another way to reveal and hide elements—you just use a different animation to accomplish the task. The slideDown(), slideUp(), and slideToggle() methods are demonstrated in the following example, which modifies the document created in Example 8-1. This document also appears in the source code download materials as Example 8-2. To save space, the following example shows only the differences between Example 8-1 and Example 8-2.

<input type='submit'

name='exampleAnimationShow'

id='exampleAnimationShow'

value='Slide Down' />

<input type='submit'

name='exampleAnimationHide'

id='exampleAnimationHide'

value='Slide Up' />

<input type='submit'

name='exampleAnimationToggle'

id='exampleAnimationToggle'

value='Toggle Slide' />

</div>

</fieldset>

In the HTML document, only the value attributes of the submit <input> elements are modified to reflect the updated actions.

The only modification to the style sheet is to the background color of the <h4> element within the dialog. This is done so that you can more easily see a difference between Example 8-1 and Example 8-2 when testing the script in a browser.

div#exampleDialog h4 {

border: 1px solid rgb(50, 50, 50);

background: lightgreen;

border-radius: 4px;

padding: 5px;

margin: 0 0 10px 0;

}

The following script replaces the show(), hide(), and toggle() methods from Example 8-1 with the slideDown(), slideUp(), and slideToggle() methods.

$(document).ready(

function()

{

var animating = false;

$('input#exampleAnimationShow').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').slideDown(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationHide').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').slideUp(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationToggle').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').slideToggle(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationDuration').change(

function()

{

$(this).attr('title', $(this).val());

}

);

}

);

The preceding script results in the document that you see in Figure 8.2.

Figure 8.2

The preceding example repeats the logic of Example 8-1, swapping out show(), hide(), and toggle() for slideDown(), slideUp(), and slideToggle(). The setup is exactly the same, only the animation is different. The arguments provided to these three methods are exactly the same as the arguments provided to show(), hide(), and toggle(). Example 8-2 allows you to test every possible variation of utilizing the slideDown(), slideUp(), and slideToggle() animations in your own scripts.

Refer to Example 8-1 for a detailed explanation of the logic taking place in Example 8-2. The next section presents a demonstration of the last trio of built-in jQuery methods that provide animations for showing and hiding elements: the fadeIn(), fadeOut(), andfadeToggle() methods.

Fading Elements

Fading elements is another variation that jQuery offers for revealing and hiding elements via an animation that takes an element from fully opaque to fully transparent or vice versa. After a fade in is started, or a fade out has been completed, the CSS display property is toggled, so an element that has been faded out no longer takes up space in the document, or an element that is fading in is visible in the document.

The API is the same as the methods of the preceding two sections; only the names of those methods and the animation used by those methods are different. jQuery offers three methods for fading elements: fadeIn(), fadeOut(), and fadeToggle().

The following example demonstrates the trio of fading methods provided by jQuery. Again the example is the same concept provided in Example 8-1 and Example 8-2, with only a few tweaks so that you can observe what's possible using jQuery's fade animations. The following example is Example 8-3 in the source code download materials. Only the portions of each document that have been changed are quoted to conserve space.

<input type='submit'

name='exampleAnimationShow'

id='exampleAnimationShow'

value='Fade In' />

<input type='submit'

name='exampleAnimationHide'

id='exampleAnimationHide'

value='Fade Out' />

<input type='submit'

name='exampleAnimationToggle'

id='exampleAnimationToggle'

value='Toggle Fade' />

</div>

</fieldset>

In Example 8-3.html only the value attributes of the submit <input> elements have been changed. These are given labels that reflect the fade actions that occur when the submit <input> elements are pressed.

The only change to the CSS document is again the background color of the <h4> element within the dialog; this time the background is set to yellow.

div#exampleDialog h4 {

border: 1px solid rgb(50, 50, 50);

background: yellow;

border-radius: 4px;

padding: 5px;

margin: 0 0 10px 0;

}

The following script demonstrates the fadeIn(), fadeOut(), and fadeToggle() methods.

$(document).ready(

function()

{

var animating = false;

$('input#exampleAnimationShow').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').fadeIn(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationHide').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').fadeOut(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationToggle').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').fadeToggle(

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationDuration').change(

function()

{

$(this).attr('title', $(this).val());

}

);

}

);

The preceding example results are shown in Figure 8.3.

Figure 8.3

Custom Animation

jQuery also provides an API that facilitates custom animation using the animate() method. jQuery's animate() method transitions any CSS properties with numeric values over the specified duration. This makes it possible to arbitrarily animate width, height, margin,padding, border-width, or any other property with a numeric value. The animate() method automatically pulls the starting values from the style properties that are present when animation begins, and those properties are transitioned over the specified duration using the specified easing algorithm.

The following example, Example 8-4, demonstrates how to use the animate() method using the same example that you used for the previous three examples. As with Example 8-3 and Example 8-2, only the portions of the HTML document that have been changed from the other examples are provided.

Duration:

</label>

<input type='range'

value='5000'

min='100'

max='10000'

step='100'

name='exampleAnimationDuration'

id='exampleAnimationDuration' />

<input type='submit'

name='exampleAnimationGrow'

id='exampleAnimationGrow'

value='Grow' />

<input type='submit'

name='exampleAnimationShrink'

id='exampleAnimationShrink'

value='Shrink' />

</div>

</fieldset>

The following CSS shows only the portion that changes from Example 8-3.

div#exampleDialog h4 {

border: 1px solid rgb(50, 50, 50);

background: pink;

border-radius: 4px;

padding: 5px;

margin: 0 0 10px 0;

}

The following script demonstrates the animate() method.

$(document).ready(

function()

{

var animating = false;

$('input#exampleAnimationGrow').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').animate(

{

width : '400px',

height : '350px',

marginLeft : '-210px',

marginTop : '-185px'

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationShrink').click(

function(event)

{

event.preventDefault();

if (!animating)

{

animating = true;

var easing = $('select#exampleAnimationEasing').val();

var duration = parseInt($('input#exampleAnimationDuration').val());

$('div#exampleDialog').animate(

{

width : '300px',

height : '200px',

marginLeft : '-160px',

marginTop : '-110px'

duration,

easing,

function()

{

animating = false;

}

);

}

);

$('input#exampleAnimationDuration').change(

function()

{

$(this).attr('title', $(this).val());

}

);

}

);

The preceding example is shown in Figure 8.4, when you click the Grow button.

Figure 8.4

When you click the Grow button, the animate() method animates a transition in the <div> with the id name exampleDialog from the width, height, and margin that are specified in the style sheet.

$('div#exampleDialog').animate(

{

width : '400px',

height : '350px',

marginLeft : '-210px',

marginTop : '-185px'

duration,

easing,

function()

{

animating = false;

}

);

The width is animated from 300px to 400px, the height from 200px to 350px, the margin-left from -160px to -210px, and the margin-top from -110px to -185px. All four of these properties are animated at the same time, at the same rate determined by the duration and theeasing selections. With the exception of the specification of custom CSS properties to animate, the animate() method is otherwise similar to the methods introduced in the earlier sections of this chapter.

Although the animate() method is limited to animating numeric CSS properties, jQuery UI provides a jQuery Color plugin as part of jQuery UI for animating transitions between colors as well as numeric values.

The next section covers the options that you can provide to any of jQuery's animation methods to have a more fine-grained control over jQuery animations.

Animation Options

All jQuery's animation methods—the animate() method as well as show(), hide(), toggle(), slideIn(), slideDown(), slideToggle(), fadeIn(), fadeOut(), and fadeToggle()—support providing a simple JavaScript object of key, value pairs in place of the duration, easing, andcallback function arguments, which allows you to fine-tune all aspects of an animation.

The following describes what the method signatures of all these methods look like when using the options argument instead of the duration, easing, and callback function arguments.

· animate(properties, options)

· show(options), hide(options), toggle(options)

· slideDown(options), slideUp(options), slideToggle(options)

· fadeIn(options), fadeOut(options), fadeToggle(options)

The options that can be provided in the alternative options argument are as follows:

· duration—The length of the animation. The value will be either an integer representing milliseconds or one of the following strings: 'slow', 'normal', or 'fast'.

· easing—How the transition is animated over time. The value will be a string referencing one of jQuery's built-in easing functions.

· queue—A boolean value that indicates whether the animation should be placed in jQuery's animation queue. If the value provided to queue is false, the animation is not queued and it begins immediately. If a string is the value provided, the animation is placed in a queue that is named after the string provided. If a custom queue name is used, the animation will not be started automatically; to start a custom queue, call the dequeue(queueName) method.

· specialEasing—Applicable only to the animate() method. An object that maps CSS properties provided in the properties argument to easings. This makes it possible to animate different properties with different easings.

· step function((number) now, (tween) tween—A callback function that is executed once for each animated property of each animated element, per step of the animation.

· progress function((promise) animation, (number) progress, (number) remainingMilliseconds) —A callback function that is executed after each step of the animation but is executed only once per animated element regardless of the animated properties.

· complete function()—A callback function that is executed when the animation has completed.

· start function((promise) animation) —A callback function that is executed when the animation starts.

· done function((promise) animation, (Boolean) jumpedToTheEnd) —A callback function that is executed when the animation has completed and its Promise object has been resolved.

· fail function((promise) animation, (Boolean) jumpedToTheEnd) —A callback function that is executed when the animation fails to be completed and its Promise object has been rejected.

· always function((promise) animation, (Boolean) jumpedToTheEnd) —A callback function that is executed when the animation has been completed or stops without completing and its Promise object has either been resolved or rejected.

Summary

In this chapter, you learned how jQuery's animation methods work to hide, display, or transition elements, either by using jQuery's various built-in animations or by making a custom animation.

You learned how jQuery's hide(), show(), and toggle(), as well as all seven additional animation-related methods, can be provided a duration argument, which can be either a string 'slow', 'normal', or 'fast', or an integer representing time specified in milliseconds. When used without any arguments specified, jQuery's show(), hide(), and toggle() methods simply show and hide an element by toggling the CSS display property without an animation. Specifying at least the one argument causes these methods to use an animation to transition between the hidden and displayed states.

jQuery offers some alternative animations that essentially provide the same functions as the show(), hide(), and toggle() methods. The slideDown(), slideUp(), and slideToggle() methods animate an element's height to hide and display an element. The fadeIn(),fadeOut(), and fadeToggle() methods animate an element's opacity to hide and display an element.

Finally, you learned how to use the animate() method, which transitions between the styles an element already has to styles that you specify in the first argument to the animate() method. The styles that can be animated are all of the various CSS properties that allow numeric values.

jQuery effects are documented in detail in Appendix M, “Animation and Easing Effects.”

Exercises

1. When specifying the duration of an animation, what values are allowed?

2. What does jQuery's slideDown() method do?

3. Which methods would you use to display or hide an element using an animation of that element's opacity?

4. What method would you use to create a custom animation?

5. Which easings are provided with jQuery core?