JSFiddle - React, Tailwind, and code Playground
HTML
<img id="image" width="100px" height="100px" />
CSS
img {
background-color: red;
}
JavaScript
var animationDiv= $("<div></div>"); //we don't add this div to the DOM
var image= $("img#image");
//could use any property besides "top" and "left", but the value must be valid, that means concatenating a "px" to numerical attributes if they don't have it already (and removing them in the step callback if they do)
animationDiv.css("left", image.attr("width"));
animationDiv.css("top", image.attr("height"));
animationDiv.animate(
{
left: 300,
top: 300
},
{
duration: 2500,
step: function(value, properties) {
if (properties.prop == "left")
image.attr("width", value + "px")
else
image.attr("height", value + "px")
}
}
)