Animation Effects

/**
 * Animate CSS properties using CSS transitions
 * @param properties - Object of CSS properties to animate
 * @param duration - Animation duration (number in ms, or string: 'fast', 'slow')
 * @param ease - Easing function name or CSS timing function
 * @param callback - Function to call when animation completes
 * @param delay - Delay before starting animation (in ms)
 * @returns Original collection
 */
$.fn.animate(properties, duration, ease, callback, delay);

/**
 * Lower-level animation method
 * @param properties - CSS properties to animate
 * @param duration - Animation duration
 * @param ease - Easing function
 * @param callback - Completion callback
 * @param delay - Start delay
 * @returns Original collection
 */
$.fn.anim(properties, duration, ease, callback, delay);

// Basic animation
$('.box').animate({
  left: '100px',
  top: '50px',
  opacity: 0.5
}, 500);

// With easing and callback
$('.element').animate({
  width: '200px',
  height: '200px'
}, 1000, 'ease-out', function() {
  console.log('Animation complete');
});

// Using string durations
$('.item').animate({opacity: 0}, 'fast'); // 200ms
$('.item').animate({opacity: 1}, 'slow'); // 600ms

// Complex animation with delay
$('.card').animate({
  transform: 'translateX(100px) rotate(45deg)',
  'background-color': '#ff0000'
}, 800, 'ease-in-out', null, 200);

/**
 * Fade elements in (show with opacity animation)
 * @param speed - Animation duration ('fast', 'slow', or milliseconds)
 * @param callback - Function to call when complete
 * @returns Original collection
 */
$.fn.fadeIn(speed, callback);

/**
 * Fade elements out (hide with opacity animation)
 * @param speed - Animation duration
 * @param callback - Completion callback
 * @returns Original collection
 */
$.fn.fadeOut(speed, callback);

/**
 * Fade to specific opacity level
 * @param speed - Animation duration
 * @param opacity - Target opacity (0 to 1)
 * @param callback - Completion callback
 * @returns Original collection
 */
$.fn.fadeTo(speed, opacity, callback);

/**
 * Toggle fade animation (in if hidden, out if visible)
 * @param speed - Animation duration
 * @param callback - Completion callback
 * @returns Original collection
 */
$.fn.fadeToggle(speed, callback);

// Basic fade effects
$('.modal').fadeIn();
$('.notification').fadeOut();

// With duration and callback
$('.overlay').fadeIn(300, function() {
  console.log('Overlay shown');
});

$('.alert').fadeOut('slow', function() {
  $(this).remove();
});

// Fade to specific opacity
$('.image').fadeTo(500, 0.3);

// Toggle fade
$('.details').fadeToggle('fast');

// Chaining animations
$('.element')
  .fadeOut('fast')
  .delay(1000)
  .fadeIn('slow');

/**
 * Show elements with optional animation
 * @param speed - Animation duration (if provided, animates)
 * @param callback - Completion callback
 * @returns Original collection
 */
$.fn.show(speed, callback);

/**
 * Hide elements with optional animation
 * @param speed - Animation duration (if provided, animates)
 * @param callback - Completion callback
 * @returns Original collection
 */
$.fn.hide(speed, callback);

/**
 * Toggle visibility with optional animation
 * @param speed - Animation duration (if provided, animates)
 * @param callback - Completion callback
 * @returns Original collection
 */
$.fn.toggle(speed, callback);

// Instant show/hide (no animation)
$('.element').show();
$('.element').hide();

// Animated show/hide
$('.panel').show(400);
$('.sidebar').hide('fast');

// With callbacks
$('.menu').show(300, function() {
  $(this).addClass('visible');
});

// Toggle with animation
$('.collapsible').toggle('slow');

/**
 * Animation configuration object
 */
$.fx; // Main configuration object

/**
 * Disable all animations globally
 */
$.fx.off; // Set to true to disable animations

/**
 * Animation speed presets
 */
$.fx.speeds; // {_default: 400, fast: 200, slow: 600}

/**
 * CSS vendor prefix for current browser
 */
$.fx.cssPrefix; // e.g., '-webkit-', '-moz-', ''

/**
 * Transition end event name for current browser
 */
$.fx.transitionEnd; // e.g., 'webkitTransitionEnd', 'transitionend'

/**
 * Animation end event name for current browser
 */
$.fx.animationEnd; // e.g., 'webkitAnimationEnd', 'animationend'

// Disable animations globally
$.fx.off = true;
$('.element').fadeIn(); // Will show instantly

// Customize speed presets
$.fx.speeds.custom = 1500;
$('.element').animate({opacity: 0}, 'custom');

// Check browser capabilities
if ($.fx.cssPrefix) {
  console.log('Browser prefix:', $.fx.cssPrefix);
}

// Listen for transition end
$('.element').on($.fx.transitionEnd, function() {
  console.log('Transition completed');
});

// Built-in CSS timing functions:
// - 'linear': Constant speed
// - 'ease': Slow start, fast middle, slow end
// - 'ease-in': Slow start
// - 'ease-out': Slow end
// - 'ease-in-out': Slow start and end
// - Custom cubic-bezier functions

// Examples:
$('.element').animate({left: '100px'}, 500, 'ease-in');
$('.element').animate({opacity: 0}, 300, 'cubic-bezier(0.25, 0.46, 0.45, 0.94)');

// Sequential animations (using callbacks)
$('.box')
  .animate({left: '100px'}, 500, function() {
    $(this).animate({top: '100px'}, 500, function() {
      $(this).animate({opacity: 0.5}, 300);
    });
  });

// Better chaining pattern
function animateSequence($element) {
  $element
    .animate({left: '100px'}, 500)
    .animate({top: '100px'}, 500)
    .animate({opacity: 0.5}, 300);
}

// Parallel animations on different elements
$('.item1').animate({left: '100px'}, 500);
$('.item2').animate({right: '100px'}, 500);
$('.item3').animate({opacity: 0.5}, 500);

// Use transform for positioning (hardware accelerated)
$('.element').animate({
  transform: 'translateX(100px) translateY(50px)'
}, 500);

// Prefer transform over left/top
// Good: transform: translateX()
// Less optimal: left: '100px'

// Use opacity for fade effects
$('.element').animate({opacity: 0}, 300);

// Batch property changes
$('.element').animate({
  transform: 'scale(1.2) rotate(45deg)',
  opacity: 0.8,
  'background-color': '#ff0000'
}, 500);

// Force hardware acceleration
$('.element').css('transform', 'translateZ(0)'); // Before animating

// Listen for transition events
$('.element').on('transitionend', function(e) {
  console.log('Transition ended:', e.propertyName);
});

// Cross-browser transition end
$('.element').on($.fx.transitionEnd, function() {
  console.log('Animation completed');
});

// Animation callbacks
$('.element').animate({opacity: 0}, 500, function() {
  // This callback fires when animation completes
  console.log('Fade out completed');
  $(this).hide(); // Additional actions
});

// Slide panel animation
function slideTogglePanel($panel) {
  if ($panel.hasClass('open')) {
    $panel
      .animate({transform: 'translateX(-100%)'}, 300)
      .removeClass('open');
  } else {
    $panel
      .addClass('open')
      .animate({transform: 'translateX(0)'}, 300);
  }
}

// Staggered list animations
$('.list-item').each(function(index) {
  $(this).animate({
    opacity: 1,
    transform: 'translateY(0)'
  }, 300, 'ease-out', null, index * 100); // 100ms delay between items
});

// Loading spinner animation
function showSpinner() {
  $('.spinner')
    .show()
    .animate({transform: 'rotate(360deg)'}, 1000, 'linear', function() {
      // Repeat animation
      $(this).css('transform', 'rotate(0deg)');
      showSpinner();
    });
}

// Modal entrance animation
function showModal($modal) {
  $modal
    .css({
      opacity: 0,
      transform: 'scale(0.8) translateY(-50px)'
    })
    .show()
    .animate({
      opacity: 1,
      transform: 'scale(1) translateY(0)'
    }, 400, 'ease-out');
}

// Modern browsers: CSS transitions
// Older browsers: Graceful degradation

// Check for animation support
if ($.fx.cssPrefix !== undefined) {
  // CSS transitions supported
  $('.element').animate({opacity: 0}, 500);
} else {
  // Fallback to instant change
  $('.element').css('opacity', 0);
}

// Zepto handles vendor prefixes automatically
$('.element').animate({
  transform: 'rotate(45deg)', // Becomes -webkit-transform, etc.
  transition: 'all 0.3s ease'
}, 300);