JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div>
			<img id="photo" src="http://jpf.jp22.net/tel.jpg" iw="200" width="200" height="150" ih="150"/>
		</div>

		<div>
			<button id="b1">
				Enlarge Me
			</button>
		</div>

		<div>
			<button id="b2">
				Shrink Me
			</button>
		</div>

		<div>
			<button id="b3">
				Reset Me
			</button>
		</div>

JavaScript

function enlarge_me() {
					var photo1 = document.getElementById("photo");

					TweenMax.to(photo1, 1.5, {
						width : 400,
						height : 300
					});
				};

				function reset_me() {
					var photo2 = document.getElementById("photo");
					var h1 = (photo2.getAttribute("ih"));
					var w1 = (photo2.getAttribute("iw"));
					console.log('h1=' + h1  + '   w1=' + w1);
					TweenMax.to(photo2, 1.5, {
						width : Number(w1),
						height : Number(h1)
					});
				};

				function shrink_me() {

					var photo3 = document.getElementById("photo");
					//or use jQuery's $("#photo")
					console.log(photo3);
					TweenMax.to(photo3, 3.5, {
						width : 90,
						height : 80
					});
				};

				$("#b1").click(function(event) {
					enlarge_me();
					//event.preventDefault();
				});

				$("#b2").click(function(event) {
					shrink_me();
					//event.preventDefault();
				});

				$("#b3").click(function(event) {
					reset_me();
					//event.preventDefault();
				});