or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ajax.mdcore-selection.mdcss-styling.mddeferred-promises.mdeffects.mdevents.mdindex.mdmanipulation.mdutilities.md
tile.json

effects.mddocs/

Effects and Animation

jQuery provides a comprehensive animation system with built-in effects, custom animations, and Promise-based completion handling. The TypeScript types ensure type safety for all animation parameters and callback functions.

Built-in Effects

Show and Hide Effects

interface JQuery<TElement = HTMLElement> {
    // Show effects
    show(): this;
    show(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    show(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    show(options: JQuery.EffectsOptions<TElement>): this;
    
    // Hide effects
    hide(): this;
    hide(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    hide(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    hide(options: JQuery.EffectsOptions<TElement>): this;
    
    // Toggle visibility
    toggle(): this;
    toggle(showOrHide: boolean): this;
    toggle(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    toggle(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    toggle(options: JQuery.EffectsOptions<TElement>): this;
}

Fade Effects

interface JQuery<TElement = HTMLElement> {
    // Fade in
    fadeIn(): this;
    fadeIn(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    fadeIn(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    fadeIn(options: JQuery.EffectsOptions<TElement>): this;
    
    // Fade out
    fadeOut(): this;
    fadeOut(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    fadeOut(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    fadeOut(options: JQuery.EffectsOptions<TElement>): this;
    
    // Fade to specific opacity
    fadeTo(duration: JQuery.Duration, opacity: number, complete?: (this: TElement) => void): this;
    fadeTo(duration: JQuery.Duration, opacity: number, easing: string, complete?: (this: TElement) => void): this;
    
    // Fade toggle
    fadeToggle(): this;
    fadeToggle(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    fadeToggle(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    fadeToggle(options: JQuery.EffectsOptions<TElement>): this;
}

Slide Effects

interface JQuery<TElement = HTMLElement> {
    // Slide down
    slideDown(): this;
    slideDown(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    slideDown(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    slideDown(options: JQuery.EffectsOptions<TElement>): this;
    
    // Slide up
    slideUp(): this;
    slideUp(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    slideUp(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    slideUp(options: JQuery.EffectsOptions<TElement>): this;
    
    // Slide toggle
    slideToggle(): this;
    slideToggle(duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    slideToggle(duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    slideToggle(options: JQuery.EffectsOptions<TElement>): this;
}

Animation Types and Options

Core Animation Types

declare namespace JQuery {
    // Duration type
    type Duration = number | "fast" | "slow";
    
    // Easing functions
    type EasingType = "linear" | "swing" | string;
    
    // Animation options interface
    interface EffectsOptions<TElement> {
        duration?: Duration;
        easing?: EasingType;
        queue?: string | boolean;
        specialEasing?: JQuery.PlainObject<EasingType>;
        step?: (this: TElement, now: number, fx: Tween<TElement>) => void;
        progress?: (this: TElement, animation: Animation<TElement>, progress: number, remainingMs: number) => void;
        complete?: (this: TElement) => void;
        done?: (this: TElement, animation: Animation<TElement>, jumpedToEnd: boolean) => void;
        fail?: (this: TElement, animation: Animation<TElement>, jumpedToEnd: boolean) => void;
        always?: (this: TElement, animation: Animation<TElement>, jumpedToEnd: boolean) => void;
    }
    
    // Animation properties
    interface PlainObject<T = any> {
        [key: string]: T;
    }
    
    // CSS properties for animation
    interface CSSProperties {
        [propertyName: string]: string | number | ((this: Element, index: number, value: string) => string | number);
    }
}

Basic Effect Examples

Show/Hide Effects

// Simple show/hide
$('#element').show();
$('#element').hide();
$('#element').toggle();

// With duration
$('#element').show(500);           // 500ms
$('#element').hide('fast');        // Fast preset
$('#element').toggle('slow');      // Slow preset

// With callback
$('#element').show(500, function() {
    console.log('Show animation complete');
});

// With easing and callback
$('#element').hide(1000, 'swing', function() {
    console.log('Hide animation complete with swing easing');
});

// With options object
$('#element').show({
    duration: 800,
    easing: 'linear',
    complete: function() {
        console.log('Animation complete');
    }
});

Fade Effects

// Basic fade effects
$('#element').fadeIn();
$('#element').fadeOut();
$('#element').fadeToggle();

// Fade with duration and callback
$('#element').fadeIn(600, function() {
    console.log('Fade in complete');
});

// Fade to specific opacity
$('#element').fadeTo(500, 0.5);     // 50% opacity
$('#element').fadeTo('fast', 0.8);  // 80% opacity

// Complex fade options
$('#element').fadeOut({
    duration: 1000,
    easing: 'swing',
    complete: function() {
        $(this).remove();
    }
});

Slide Effects

// Basic slide effects
$('#panel').slideDown();
$('#panel').slideUp();
$('#panel').slideToggle();

// Slide with duration
$('#menu').slideDown(300);
$('#menu').slideUp('fast');

// Slide with callback
$('#dropdown').slideDown(400, function() {
    $(this).addClass('expanded');
});

// Accordion-style sliding
$('.accordion-header').on('click', function() {
    const $content = $(this).next('.accordion-content');
    $('.accordion-content').not($content).slideUp();
    $content.slideToggle();
});

Custom Animations

The animate() Method

interface JQuery<TElement = HTMLElement> {
    // Custom animation
    animate(properties: JQuery.PlainObject, complete?: (this: TElement) => void): this;
    animate(properties: JQuery.PlainObject, duration: JQuery.Duration, complete?: (this: TElement) => void): this;
    animate(properties: JQuery.PlainObject, duration: JQuery.Duration, easing: string, complete?: (this: TElement) => void): this;
    animate(properties: JQuery.PlainObject, options: JQuery.EffectsOptions<TElement>): this;
}

Custom Animation Examples

// Simple property animation
$('#element').animate({
    left: '250px',
    opacity: 0.5,
    height: '150px',
    width: '150px'
}, 1000);

// Relative values
$('#element').animate({
    left: '+=50px',    // Move 50px right
    top: '-=25px',     // Move 25px up
    opacity: 0.8
}, 500);

// Multiple properties with different easing
$('#element').animate({
    width: '200px',
    height: '200px'
}, {
    duration: 1000,
    specialEasing: {
        width: 'linear',
        height: 'swing'
    }
});

// Step callback for progress tracking
$('#progress').animate({
    width: '100%'
}, {
    duration: 2000,
    step: function(now, fx) {
        const percent = Math.round(now);
        $(this).text(percent + '%');
    },
    complete: function() {
        $(this).text('Complete!');
    }
});

// Complex animation with all callbacks
$('#element').animate({
    left: '200px',
    top: '100px',
    opacity: 0.5
}, {
    duration: 1500,
    easing: 'swing',
    queue: true,
    step: function(now, tween) {
        console.log(`${tween.prop}: ${now}`);
    },
    progress: function(animation, progress, remainingMs) {
        console.log(`Progress: ${Math.round(progress * 100)}%`);
    },
    complete: function() {
        console.log('Animation complete');
    }
});

Animation Queueing

Queue Management

interface JQuery<TElement = HTMLElement> {
    // Queue management
    queue(): Array<Function>;
    queue(queueName: string): Array<Function>;
    queue(newQueue: Array<Function>): this;
    queue(queueName: string, newQueue: Array<Function>): this;
    queue(callback: Function): this;
    queue(queueName: string, callback: Function): this;
    
    // Dequeue next function
    dequeue(): this;
    dequeue(queueName: string): this;
    
    // Clear queue
    clearQueue(): this;
    clearQueue(queueName: string): this;
    
    // Delay in queue
    delay(duration: number): this;
    delay(duration: number, queueName: string): this;
    
    // Stop animations
    stop(): this;
    stop(clearQueue: boolean): this;
    stop(queue: string): this;
    stop(clearQueue: boolean, jumpToEnd: boolean): this;
    stop(queue: string, clearQueue: boolean, jumpToEnd: boolean): this;
    
    // Finish animations
    finish(): this;
    finish(queue: string): this;
}

Queue Examples

// Sequential animations (default queueing)
$('#element')
    .animate({ left: '100px' }, 500)
    .animate({ top: '100px' }, 500)
    .animate({ left: '0px' }, 500)
    .animate({ top: '0px' }, 500);

// Add delay between animations
$('#element')
    .animate({ opacity: 0.5 }, 500)
    .delay(1000)
    .animate({ opacity: 1.0 }, 500);

// Custom queue functions
$('#element')
    .animate({ left: '100px' }, 500)
    .queue(function(next) {
        $(this).addClass('moved');
        next(); // Continue queue
    })
    .animate({ left: '0px' }, 500);

// Stop animations
$('#stop-button').on('click', function() {
    $('#element').stop();           // Stop current animation
    $('#element').stop(true);       // Stop and clear queue
    $('#element').stop(true, true); // Stop, clear queue, and jump to end
});

// Finish all animations immediately
$('#finish-button').on('click', function() {
    $('#element').finish();
});

// Named queues for parallel animations
$('#element')
    .animate({ left: '100px' }, { queue: 'horizontal' })
    .animate({ top: '100px' }, { queue: 'vertical' });

// Start custom queues
$('#element').dequeue('horizontal').dequeue('vertical');

Animation Events and Promises

Animation Promise Support

// jQuery animations return Promise-like objects
const animationPromise = $('#element').animate({
    left: '200px',
    opacity: 0.5
}, 1000).promise();

animationPromise.done(function() {
    console.log('Animation completed successfully');
}).fail(function() {
    console.log('Animation was stopped or failed');
}).always(function() {
    console.log('Animation finished (success or failure)');
});

// Chaining with Promise-style methods
$('#element').hide(500).promise().done(function() {
    return $('#other-element').show(500).promise();
}).done(function() {
    console.log('Both animations complete');
});

// Wait for multiple element animations
$.when(
    $('#element1').animate({ left: '100px' }, 500).promise(),
    $('#element2').animate({ top: '100px' }, 500).promise(),
    $('#element3').fadeOut(500).promise()
).done(function() {
    console.log('All animations complete');
});

Animation Callbacks

// Using all callback types
$('#element').animate({
    width: '200px',
    height: '200px'
}, {
    duration: 1000,
    
    // Called for each animated property on each step
    step: function(now, tween) {
        console.log(`${tween.prop} is now ${now}`);
    },
    
    // Called on each animation frame with overall progress
    progress: function(animation, progress, remainingMs) {
        const percent = Math.round(progress * 100);
        $('#progress-bar').css('width', percent + '%');
    },
    
    // Called when animation completes successfully
    complete: function() {
        $(this).addClass('animation-complete');
    },
    
    // Promise-style callbacks
    done: function(animation, jumpedToEnd) {
        console.log('Animation done:', !jumpedToEnd ? 'naturally' : 'jumped to end');
    },
    
    fail: function(animation, jumpedToEnd) {
        console.log('Animation failed or was stopped');
    },
    
    always: function(animation, jumpedToEnd) {
        console.log('Animation finished regardless of outcome');
    }
});

Performance and Advanced Features

Hardware Acceleration

// Properties that benefit from hardware acceleration
$('#element').animate({
    // These properties are GPU-accelerated in modern browsers
    'transform': 'translateX(100px)',
    'opacity': 0.5
}, 500);

// Traditional properties (may not be hardware accelerated)
$('#element').animate({
    'left': '100px',    // Layout-triggering
    'width': '200px'    // Layout-triggering
}, 500);

// Use CSS transforms when possible for better performance
$('#element').animate({
    'transform': 'translateX(100px) scale(1.2) rotate(45deg)'
}, {
    duration: 1000,
    step: function(now, fx) {
        // fx.prop will be 'transform'
        $(this).css('transform', fx.now);
    }
});

Custom Easing Functions

// Register custom easing function
$.easing.customBounce = function(x: number): number {
    return x < 0.5 ? 
        2 * x * x : 
        1 - Math.pow(-2 * x + 2, 2) / 2;
};

// Use custom easing
$('#element').animate({
    left: '200px',
    top: '100px'
}, {
    duration: 1000,
    easing: 'customBounce'
});

// Different easing for different properties
$('#element').animate({
    left: '200px',
    opacity: 0.5
}, {
    duration: 1000,
    specialEasing: {
        left: 'customBounce',
        opacity: 'linear'
    }
});

Animation State Detection

// Check if element is currently animating
const isAnimating = $('#element').is(':animated');

if (isAnimating) {
    console.log('Element is currently animating');
} else {
    console.log('Element is not animating');
}

// Conditional animation
if (!$('#element').is(':animated')) {
    $('#element').animate({ left: '+=50px' }, 300);
}

// Get current queue length
const queueLength = $('#element').queue().length;
console.log(`${queueLength} animations queued`);

Complex Animation Patterns

Coordinated Animations

// Staggered animations
$('.items').each(function(index) {
    $(this).delay(index * 100).animate({
        opacity: 1,
        top: '0px'
    }, 500);
});

// Synchronized parallel animations
function parallellAnimations() {
    const duration = 1000;
    
    $('#element1').animate({ left: '100px' }, duration);
    $('#element2').animate({ right: '100px' }, duration);
    $('#element3').animate({ top: '100px' }, duration);
}

// Wave effect
$('.wave-items').each(function(index) {
    const element = this;
    setTimeout(() => {
        $(element).animate({
            transform: 'translateY(-20px)'
        }, 200).animate({
            transform: 'translateY(0px)'
        }, 200);
    }, index * 50);
});

// Morphing animation sequence
function morphSequence() {
    $('#shape')
        .animate({ 
            borderRadius: '50%',
            transform: 'scale(1.2)'
        }, 500)
        .animate({
            borderRadius: '0%', 
            transform: 'scale(1) rotate(45deg)'
        }, 500)
        .animate({
            transform: 'scale(1) rotate(0deg)'
        }, 500);
}

Interactive Animations

// Hover-triggered animations
$('.interactive-card').hover(
    function() {
        // Mouse enter
        $(this).stop().animate({
            transform: 'scale(1.05)',
            boxShadow: '0 10px 20px rgba(0,0,0,0.2)'
        }, 200);
    },
    function() {
        // Mouse leave
        $(this).stop().animate({
            transform: 'scale(1)',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }, 200);
    }
);

// Click animation with visual feedback
$('.button').on('click', function(event) {
    const $button = $(this);
    const $ripple = $('<span class="ripple"></span>');
    
    const buttonPos = $button.offset()!;
    const rippleX = event.pageX - buttonPos.left;
    const rippleY = event.pageY - buttonPos.top;
    
    $ripple.css({
        top: rippleY,
        left: rippleX
    });
    
    $button.append($ripple);
    
    $ripple.animate({
        transform: 'scale(4)',
        opacity: 0
    }, 600, function() {
        $ripple.remove();
    });
});

The effects and animation system provides comprehensive tools for creating smooth, performant animations with full TypeScript support. From simple show/hide effects to complex coordinated animation sequences, jQuery's animation API enables rich user interfaces with precise control over timing, easing, and coordination.