CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jquery-ui

A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

effects.mddocs/

Effects

jQuery UI effects provide enhanced animation capabilities beyond standard jQuery animations. The effects system includes 15+ built-in effects and enhanced versions of jQuery's core animation methods.

Capabilities

Enhanced Animation Methods

jQuery UI extends jQuery's core animation methods to accept effect names and options:

/**
 * Hides element with specified effect
 * @param {string} effect - Effect name (e.g., 'blind', 'slide', 'fade')
 * @param {object|number} options - Effect options or duration
 * @param {number} duration - Duration in milliseconds
 * @param {Function} callback - Completion callback
 */
$(element).hide(effect, options, duration, callback);

/**
 * Shows element with specified effect
 * @param {string} effect - Effect name
 * @param {object|number} options - Effect options or duration
 * @param {number} duration - Duration in milliseconds
 * @param {Function} callback - Completion callback
 */
$(element).show(effect, options, duration, callback);

/**
 * Toggles element visibility with specified effect
 * @param {string} effect - Effect name
 * @param {object|number} options - Effect options or duration
 * @param {number} duration - Duration in milliseconds
 * @param {Function} callback - Completion callback
 */
$(element).toggle(effect, options, duration, callback);

Class Animation Methods

Animated CSS class manipulation with effects:

/**
 * Adds CSS class with animation
 * @param {string} className - Class name to add
 * @param {number} duration - Animation duration
 * @param {string} easing - Easing function name
 * @param {Function} callback - Completion callback
 */
$(element).addClass(className, duration, easing, callback);

/**
 * Removes CSS class with animation
 * @param {string} className - Class name to remove
 * @param {number} duration - Animation duration
 * @param {string} easing - Easing function name
 * @param {Function} callback - Completion callback
 */
$(element).removeClass(className, duration, easing, callback);

/**
 * Toggles CSS class with animation
 * @param {string} className - Class name to toggle
 * @param {number} duration - Animation duration
 * @param {string} easing - Easing function name
 * @param {Function} callback - Completion callback
 */
$(element).toggleClass(className, duration, easing, callback);

/**
 * Switches from one class to another with animation
 * @param {string} removeClassName - Class to remove
 * @param {string} addClassName - Class to add
 * @param {number} duration - Animation duration
 * @param {string} easing - Easing function name
 * @param {Function} callback - Completion callback
 */
$(element).switchClass(removeClassName, addClassName, duration, easing, callback);

Individual Effects

Blind

Blinds element up/down or left/right like a window blind:

$(element).hide('blind', { direction: 'vertical' }, 1000);
$(element).show('blind', { direction: 'horizontal' }, 1000);

Options:

  • direction: 'up' | 'vertical' | 'down' | 'left' | 'horizontal' | 'right' (default: 'up')

Bounce

Bounces element multiple times with decreasing intensity:

$(element).hide('bounce', { times: 5, distance: 200 }, 1000);
$(element).show('bounce', { times: 3 }, 1000);

Options:

  • distance: Distance in pixels for bounce (default: 20)
  • times: Number of bounces (default: 5)

Clip

Clips element from specified edges inward:

$(element).hide('clip', { direction: 'vertical' }, 1000);
$(element).show('clip', { direction: 'horizontal' }, 1000);

Options:

  • direction: 'vertical' | 'horizontal' (default: 'vertical')

Drop

Drops element in/out from specified direction:

$(element).hide('drop', { direction: 'left' }, 1000);
$(element).show('drop', { direction: 'up' }, 1000);

Options:

  • direction: 'up' | 'down' | 'left' | 'right' (default: 'left')

Explode

Explodes element into configurable number of pieces:

$(element).hide('explode', { pieces: 16 }, 1000);
$(element).show('explode', { pieces: 9 }, 1000);

Options:

  • pieces: Number of pieces (default: 9)

Fade

Fades element opacity to specified level:

$(element).hide('fade', 1000);
$(element).show('fade', 1000);
$(element).toggle('fade', { to: 0.5 }, 1000);

Options:

  • to: Target opacity (default: 0 for hide, 1 for show)

Fold

Folds element by shrinking opposite borders:

$(element).hide('fold', { size: 50, horizFirst: true }, 1000);
$(element).show('fold', { size: 20 }, 1000);

Options:

  • size: Size in pixels or percentage (default: 15)
  • horizFirst: Fold horizontal first (default: false)

Highlight

Highlights element with background color change:

$(element).show('highlight', { color: '#ffff99' }, 1000);
$(element).effect('highlight', { color: 'red' }, 1000);

Options:

  • color: Highlight color (default: '#ffff99')

Puff

Element grows while fading out (like smoke puff):

$(element).hide('puff', { percent: 150 }, 1000);
$(element).show('puff', { percent: 120 }, 1000);

Options:

  • percent: Scale percentage (default: 150)

Pulsate

Pulsates element opacity in configurable intervals:

$(element).show('pulsate', { times: 3 }, 1000);
$(element).effect('pulsate', { times: 5 }, 2000);

Options:

  • times: Number of pulses (default: 5)

Scale

Scales element to specified percentage:

$(element).hide('scale', { percent: 0, origin: ['middle', 'center'] }, 1000);
$(element).show('scale', { percent: 100, direction: 'both' }, 1000);

Options:

  • percent: Target scale percentage (default: 0 for hide, 100 for show)
  • direction: 'both' | 'vertical' | 'horizontal' (default: 'both')
  • origin: Origin point for scaling (default: ['middle', 'center'])

Shake

Shakes element back and forth horizontally or vertically:

$(element).effect('shake', { direction: 'horizontal', times: 3, distance: 20 }, 1000);

Options:

  • direction: 'horizontal' | 'vertical' (default: 'horizontal')
  • times: Number of shakes (default: 3)
  • distance: Shake distance in pixels (default: 20)

Size

Animates element to specified width/height dimensions:

$(element).effect('size', { 
  to: { width: 200, height: 60 },
  origin: ['top', 'left']
}, 1000);

Options:

  • to: Target dimensions { width: number, height: number }
  • origin: Origin point for resizing (default: ['top', 'left'])

Slide

Slides element in/out from specified direction:

$(element).hide('slide', { direction: 'left' }, 1000);
$(element).show('slide', { direction: 'up' }, 1000);

Options:

  • direction: 'up' | 'down' | 'left' | 'right' (default: 'left')

Transfer

Transfers element outline to another element:

$(element).effect('transfer', { 
  to: '#target-element',
  className: 'ui-effects-transfer'
}, 1000);

Options:

  • to: Target element selector or jQuery object
  • className: CSS class for transfer outline (default: 'ui-effects-transfer')

Effect Utilities

Direct Effect Method

Apply effects without show/hide state changes:

/**
 * Applies effect without changing element visibility
 * @param {string} effect - Effect name
 * @param {object} options - Effect options
 * @param {number} duration - Duration in milliseconds
 * @param {Function} callback - Completion callback
 */
$(element).effect(effect, options, duration, callback);

Effects Core API

Access to the effects system internals:

/**
 * Global effects namespace
 */
$.effects;

/**
 * Effects version
 */
$.effects.version; // "1.13.3"

/**
 * Registry of all available effects
 */
$.effects.effect; // Object containing all effect definitions

/**
 * Define a new custom effect
 * @param {string} name - Effect name
 * @param {string} mode - Effect mode ('show', 'hide', 'toggle', 'effect')
 * @param {Function} effect - Effect implementation function
 */
$.effects.define(name, mode, effect);

Effect Helpers

Utility functions for effect development:

/**
 * Creates placeholder element for effects
 * @param {jQuery} element - Element to create placeholder for
 * @returns {jQuery} Placeholder element
 */
$.effects.createPlaceholder(element);

/**
 * Removes effect wrapper elements
 * @param {jQuery} element - Element to unwrap
 * @returns {jQuery} Unwrapped element
 */
$.effects.removeWrapper(element);

/**
 * Creates wrapper elements for effects
 * @param {jQuery} element - Element to wrap
 * @returns {jQuery} Wrapper element
 */
$.effects.createWrapper(element);

/**
 * Gets scaled dimensions for percentage-based effects
 * @param {jQuery} element - Element to measure
 * @param {number} percent - Scale percentage
 * @param {string} direction - Scale direction
 * @returns {object} Scaled dimensions
 */
$.effects.scaledDimensions(element, percent, direction);

/**
 * Gets baseline coordinates for scaling effects
 * @param {Array} origin - Origin point array
 * @param {object} original - Original element dimensions
 * @returns {object} Baseline coordinates
 */
$.effects.getBaseline(origin, original);

Types

// Common effect options interface
interface EffectOptions {
  direction?: 'up' | 'down' | 'left' | 'right' | 'horizontal' | 'vertical' | 'both';
  duration?: number | string;
  easing?: string;
  complete?: () => void;
}

// Effect-specific option extensions
interface BlindOptions extends EffectOptions {
  direction?: 'vertical' | 'horizontal';
}

interface BounceOptions extends EffectOptions {
  distance?: number;
  times?: number;
}

interface ClipOptions extends EffectOptions {
  direction?: 'vertical' | 'horizontal';
}

interface DropOptions extends EffectOptions {
  direction?: 'up' | 'down' | 'left' | 'right';
}

interface ExplodeOptions extends EffectOptions {
  pieces?: number;
}

interface FadeOptions extends EffectOptions {
  to?: number;
}

interface FoldOptions extends EffectOptions {
  size?: number | string;
  horizFirst?: boolean;
}

interface HighlightOptions extends EffectOptions {
  color?: string;
}

interface PuffOptions extends EffectOptions {
  percent?: number;
}

interface PulsateOptions extends EffectOptions {
  times?: number;
}

interface ScaleOptions extends EffectOptions {
  percent?: number;
  direction?: 'both' | 'vertical' | 'horizontal';
  origin?: [string, string];
}

interface ShakeOptions extends EffectOptions {
  direction?: 'horizontal' | 'vertical';
  times?: number;
  distance?: number;
}

interface SizeOptions extends EffectOptions {
  to?: { width?: number, height?: number };
  origin?: [string, string];
}

interface SlideOptions extends EffectOptions {
  direction?: 'up' | 'down' | 'left' | 'right';
}

interface TransferOptions extends EffectOptions {
  to?: string | jQuery;
  className?: string;
}

// Effect definition interface for custom effects
interface EffectDefinition {
  (options: EffectOptions, done: () => void): void;
}

Usage Examples

Basic effect usage:

// Simple fade effect
$('#element').hide('fade', 1000);

// Effect with options
$('#element').show('slide', { direction: 'up' }, 500);

// Multiple effects in sequence
$('#element')
  .hide('slide', { direction: 'left' }, 500)
  .delay(1000)
  .show('bounce', { times: 3 }, 800);

Class animations:

// Animate class changes
$('#element').addClass('highlighted', 1000);
$('#element').removeClass('highlighted', 500);

// Switch classes smoothly
$('#element').switchClass('old-style', 'new-style', 1000);

Effect without state change:

// Shake element without hiding/showing
$('#element').effect('shake', { times: 2 }, 400);

// Highlight element temporarily
$('#element').effect('highlight', { color: 'yellow' }, 1500);

docs

effects.md

index.md

interactions.md

utilities.md

widgets.md

tile.json