Grow and Fade onclick

1622 views javascript

I am trying to get a box to grow, fade, change blue , and reset according to button pressed. So far color change , and reset are working ; fade and grow result in my box dissapearing.

How can I get the box to fade on click, while staying the same color as it currently is, and grow while remaining what color it is currently , when clicked.


<!DOCTYPE html>
<title>Jiggle Into JavaScript</title>

body  {margin:25px}
#resetDiv {height:150px;width:150px; background-color:orange;}

#blueDiv {height:150px;width:150px; background-color:blue;}

#fadeDiv {width:150px;height:150px;background-color:orange;opacity:0.75;}

#growDiv {height:150%;width:150%;background-color:orange}



<button onclick="grow()">

<button onclick="blue()">

<button onclick="fade()">

<button onclick="reset()">

<div id="blueDiv">
var div = document.getElementById("blueDiv");

function blue() {
    div.setAttribute("id", "blueDiv");}

function reset() {
    div.setAttribute("id", "resetDiv");}

function fade() {
    div.setAttribute("id", "fadeDiv");}
function grow() {
      div.setAttribute("id", "growDiv")

answered question

1 Answer


For fade-in, you can add fade-in class to the element (when clicking the button).

This is the relevant css:

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    100% {
        opacity: 1;

For grow, you can add grow class:

.grow {
    transform: scale(1.5);

posted this

Have an answer?


Please login first before posting an answer.