时间戳

首页 > 解决方案 > 增长和淡化 onclick

javascript - 增长和淡化 onclick

问题描述

我试图让一个盒子根据按下的按钮来增长、褪色、改变蓝色和重置。到目前为止，颜色变化和重置工作正常；褪色和生长导致我的盒子消失。

如何让框在单击时褪色，同时保持与当前颜色相同的颜色，并在单击时保持当前颜色的同时增长。

代码：

<!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>

标签： javascript

解决方案

对于淡入，您可以向元素添加淡入类（单击按钮时）。

这是相关的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;
    }
}

对于增长，您可以添加增长类：

.grow {
    transform: scale(1.5);
}

所以你可以声明它：

const myDiv = document.getElementById('myDiv'); // get the element

function grow() { // add grow to class list
  myDiv.classList.add("grow");
}

// add fade-in and remove it after 2 seconds
// 2 sseconds are the seconds of fade-it to get completed.
function fade() {
  myDiv.classList.add("fade-in");
  setTimeout(function(){myDiv.classList.remove("fade-in");}, 2000);
}

function blue() {
    myDiv.classList.add("blue");
}

function reset() { // reset the class list
    myDiv.classList = [];
}

这是一个工作的jsfiddle

推荐阅读