jQuery UI API – Easings

• Home
• HTML
• JavaScript
• CSS
• Vue
• React
• Python3
• Java
• C
• C++
• C#
• AI
• Go
• SQL
• Linux
• VS Code
• Bootstrap
• Git
• Local Bookmarks

• Home
• HTML
• CSS
• JS
• Local Bookmarks
• Search

• Vue3 Tutorial
• Vue2 Tutorial

• Bootstrap3
• Bootstrap4
• Bootstrap5

• Machine Learning
• PyTorch
• TensorFlow
• Sklearn
• NLP
• AI Agent
• Ollama
• Coding Plan

jQuery UI Tutorial

• jQuery UI Tutorial
• jQuery UI Introduction
• jQuery UI Download
• jQuery UI Usage
• jQuery UI Customization
• How jQuery UI Works

jQuery UI Themes

• jQuery UI Themes
• jQuery UI ThemeRoller
• jQuery UI CSS Framework API
• Designing jQuery UI Themes

jQuery UI Widget Factory

• jQuery UI Widget Factory
• Extending Widgets with the Widget Factory
• jQuery UI Widget Method Invocation
• Why Use the Widget Factory
• How to Use the Widget Factory

jQuery UI Reference

• jQuery UI API Documentation
• API Category – Effects
• API Category – Effects Core
• API Category – Interactions
• API Category – Method Overrides
• API Category – Methods
• API Category – Selectors
• API Category – Theming
• API Category – UI Core
• API Category – Utilities
• API Category – Widgets

jQuery UI Examples

• jQuery UI Examples
• Draggable
• Droppable
• Resizable
• Selectable
• Sortable
• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Menu
• Progressbar
• Slider
• Spinner
• Tabs
• Tooltip
• Effect
• Show
• Hide
• Toggle
• .addClass()
• .removeClass()
• .toggleClass()
• .switchClass()
• Color Animation
• Position
• Widget Factory

jQuery UI API – Drop Effect

jQuery UI API – .effect()

jQuery UI API - Easings

Easing functions specify the speed of the animation at different points. jQuery core includes two easings: linear, which moves the entire animation at a constant speed, and swing (the default easing in jQuery core), which moves slightly slower at the beginning and end of the animation than in the middle. jQuery UI provides some additional easing functions, ranging from variations on swing behavior to custom effects like bounce.

Some easings produce negative values during an animation. Depending on the animated property, the actual value may be zero. For example, you can have a negative left value, but you cannot have a negative height or opacity value.

To better understand how an easing affects an animation, spend some time studying the equation graphs. See the graphs for all available easings in jQuery UI below.