JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<h1>Property Animation Test</h1>

CSS

body {
    padding: 20px;
    font-family: sans-serif;
}

JavaScript

// Cache the body element
var $body = $('body');

function animateProp(prop) {
    
    // The object whose properties are to be animated
    var before = {};
    // The object containing the names of the properties to be animated, along with their end values
    var after = {};
    before[prop] = 1
    after[prop] = 2
    
    try {
    
        // Animate the object
        $(before).animate(after, {
            duration: 500,
            complete: function(now, fx) {
                $body.append('Successfully animated ' + prop + '</p>');
            }
        });
        
    } catch(error) {
      
        // Indicate any errors
        $body.append('<p>Failed to animate ' + prop + '</p>');
        
    }
        
}

animateProp('awesomeness');
animateProp('opacity');
animateProp('width');