JSFiddle - React, Tailwind, and code Playground
HTML
<div id="clickme">
Click here
</div>
<img id="book" src="http://rezan.by/wp-content/uploads/2014/02/original.png" alt="" width="400" height="240"
style="position: relative; left: 10px;">
JavaScript
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
alert("I'm done!")
});
});
//Note that the target value of the height property is 'toggle'. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition