Grow and Fade onclick

1622 views javascript
5

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.

Code:

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

<style> 
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}

</style>

</head>
<body>

<button onclick="grow()">
    Grow
</button>


<button onclick="blue()">
    Blue
</button>


<button onclick="fade()">
    Fade
</button>



<button onclick="reset()">
    Reset
</button>



<div id="blueDiv">
</div>
<script>
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")
}        
    </script>
</body>
</html>

answered question

1 Answer

10

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?

JD

Please login first before posting an answer.