使用单独的 JavaScript 文件在 Div 标签上创建淡入淡出效果

Question

*** 新人提醒 ***

我正在尝试为我正在处理的作业在一个盒子上创建一个简单的淡入淡出效果。这看起来应该很容易，但我被卡住了。我暂时将淡入淡出按钮的不透明度设为 0，但希望平滑淡出。我知道不透明度需要在一定时间范围内以小增量进行调整，但尽管搜索和搜索网络并尝试了很多东西，但似乎无法使其正常工作。患者个人的任何建议将不胜感激。我特别希望 .js 文件像这个简单概念中的其他按钮一样执行此操作。奖励是单击按钮两次并允许它淡出并淡入。我很想了解同一个按钮如何产生效果并将其反转。我附上了两个片段，一个来自我的 .html 文件，一个来自我的 .js.

谢谢。

  function growFunction(id){
    document.getElementById("box").style.height = "350px";
    document.getElementById("box").style.opacity = 1;
  }

  function shrinkFunction(id){
    document.getElementById("box").style.height = "50px";
    document.getElementById("box").style.opacity = 1;
  }
  
  function widenFunction(id){
    document.getElementById("box").style.width = "450px";
    document.getElementById("box").style.opacity = 1;
  }

  function tinyFunction(id){
    document.getElementById("box").style.opacity = 1;
    document.getElementById("box").style.height = "100px";
    document.getElementById("box").style.width = "100px"; 
    document.getElementById("box").style.margin = "10px";
  }

  function fadeFunction(id){
    document.getElementById("box").style.opacity = 0;
  }

  function blueFunction(id){
    document.getElementById("box").style.backgroundColor = "blue";
    document.getElementById("box").style.opacity = 1;
  }

  function pinkFunction(id){
    document.getElementById("box").style.backgroundColor = "pink";
    document.getElementById("box").style.opacity = 1;
  }

  function purpleFunction(id){
    document.getElementById("box").style.backgroundColor = "purple";
    document.getElementById("box").style.opacity = 1;
  }
  
  function greenFunction(id){
    document.getElementById("box").style.backgroundColor = "green";
    document.getElementById("box").style.opacity = 1;
  }

  function yellowFunction(id){
    document.getElementById("box").style.backgroundColor = "yellow";
    document.getElementById("box").style.opacity = 1;
  }

  function cyanFunction(id){
    document.getElementById("box").style.backgroundColor = "cyan";
    document.getElementById("box").style.opacity = 1;
  }

  function resetFunction(id){
    document.getElementById("box").style.opacity = 1;
    document.getElementById("box").style.height = "250px";
    document.getElementById("box").style.width = "250px" ; 
    document.getElementById("box").style.backgroundColor = "orange";
    document.getElementById("box").style.margin = "25px";
  }

<!DOCTYPE html>
<html>
<head>
    <style>
        #large22px {
    font-size: 22px;
    }
    </style>
    <title>Jiggle Into JavaScript</title>
</head>
<body>

    <p id="large22px">Press the buttons to change the box:</p>

    <div id="box" style="height:250px; width:250px; background-color:orange; margin:25px"></div>

    <button id="growFunction" onclick="growFunction()">Grow</button>
    <button id="shrinkFunction" onclick="shrinkFunction()">Shrink</button>
    <button id="widenFunction" onclick="widenFunction()">Widen</button>
    <button id="tinyFunction" onclick="tinyFunction()">Tiny</button>
    <button id="fadeFunction" onclick="fadeFunction()">Fade</button> 
    <button id="resetFunction" onclick="resetFunction()">Reset</button>
    <br>
    <br>
    <button id="blueFunction" onclick="blueFunction()">Blue</button>
    <button id="pinkFunction" onclick="pinkFunction()">Pink</button>
    <button id="purpleFunction" onclick="purpleFunction()">Purple</button>
    <button id="greenFunction" onclick="greenFunction()">Green</button>
    <button id="yellowFunction" onclick="yellowFunction()">Yellow</button>
    <button id="cyanFunction" onclick="cyanFunction()">Cyan</button>

    <script type="text/javascript" src="Javascript.js"></script>
    
</html>

Answer 1

这是一种不太优雅的方式来实现这样的目标，这完全取决于您要做什么，然后建立其背后的逻辑。如果您有任何问题，请告诉我。

您会注意到我在每个动作中都调用了 checkStatus 函数，在这个函数中，我最初将动作的状态保存在一个变量 (status) 中，然后我在每次点击时检查这个变量。因此，如果您按下加宽键，状态“加宽”将保存在此变量中，然后如果您再次按下加宽键，您将获得此信息，以便您可以重置值或执行任何您想要的操作。

var status = "";

function growFunction(id){
    let height; 
    if(checkStatus("grow")){
      height="250px"
    }else{
      height="350px"
    }
    document.getElementById("box").style.height = height;
    document.getElementById("box").style.opacity = 1;
  }

  function shrinkFunction(id){
    let height; 
    if(checkStatus("shrink")){
      height="250px"
    }else{
      height="50px"
    }
    document.getElementById("box").style.height = height;
    document.getElementById("box").style.opacity = 1;
  }
  
  function widenFunction(id){
    let width; 
    if(checkStatus("widen")){
      width="250px"
    }else{
      width="450px"
    }
    document.getElementById("box").style.width = width;
    document.getElementById("box").style.opacity = 1;
    
  }

  function tinyFunction(id){
    let width; let height; let margin;
    if(checkStatus("tiny")){
      width="250px"
      margin="25px";
      height="250px"
    }else{
      height="100px"
      width="100px"
      margin="10px"
    }
    document.getElementById("box").style.opacity = 1;
    document.getElementById("box").style.height = height;
    document.getElementById("box").style.width = width; 
    document.getElementById("box").style.margin = margin;
  }

  function fadeFunction(id){
    let opacity; 
    if(checkStatus("fade")){
      opacity=1
    }else{
      opacity=0
    }
    document.getElementById("box").style.opacity = opacity;
  }

  function blueFunction(id){
    let color; 
    if(checkStatus("blue")){
      color="orange"
    }else{
      color="blue"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function pinkFunction(id){
    let color; 
    if(checkStatus("pink")){
      color="orange"
    }else{
      color="pink"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function purpleFunction(id){
    let color; 
    if(checkStatus("purple")){
      color="orange"
    }else{
      color="purple"
    }
    document.getElementById("box").style.backgroundColor =color;
    document.getElementById("box").style.opacity = 1;
  }
  
  function greenFunction(id){
    let color; 
    if(checkStatus("green")){
      color="orange"
    }else{
      color="green"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function yellowFunction(id){
    let color; 
    if(checkStatus("yellow")){
      color="orange"
    }else{
      color="yellow"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function cyanFunction(id){
    let color; 
    if(checkStatus("cyan")){
      color="orange"
    }else{
      color="cyan"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function resetFunction(id){
    document.getElementById("box").style.opacity = 1;
    document.getElementById("box").style.height = "250px";
    document.getElementById("box").style.width = "250px" ; 
    document.getElementById("box").style.backgroundColor = "orange";
    document.getElementById("box").style.margin = "25px";
  }

function checkStatus(x){
  if(status != "" && status != x){
    status = x;
    return false;
  }else{
    if(status==x){
      status = ""
      return true;
    }else{
      status = x;
      return false;
    }
  }
}

<!DOCTYPE html>

<head>
    <style>
        #large22px {
    font-size: 22px;
    }
    </style>
    <title>Jiggle Into JavaScript</title>
</head>
<body>

    <p id="large22px">Press the buttons to change the box:</p>

    <div id="box" style="height:250px;transition:.3s;width:250px; background-color:orange; margin:25px"></div>

    <button id="growFunction" onclick="growFunction()">Grow</button>
    <button id="shrinkFunction" onclick="shrinkFunction()">Shrink</button>
    <button id="widenFunction" onclick="widenFunction()">Widen</button>
    <button id="tinyFunction" onclick="tinyFunction()">Tiny</button>
    <button id="fadeFunction" onclick="fadeFunction()">Fade</button> 
    <button id="resetFunction" onclick="resetFunction()">Reset</button>
    <br>
    <br>
    <button id="blueFunction" onclick="blueFunction()">Blue</button>
    <button id="pinkFunction" onclick="pinkFunction()">Pink</button>
    <button id="purpleFunction" onclick="purpleFunction()">Purple</button>
    <button id="greenFunction" onclick="greenFunction()">Green</button>
    <button id="yellowFunction" onclick="yellowFunction()">Yellow</button>
    <button id="cyanFunction" onclick="cyanFunction()">Cyan</button>

    <script type="text/javascript" src="Javascript.js"></script>

使用单独的 JavaScript 文件在 Div 标签上创建淡入淡出效果

Creating a Fade Effect On A Div Tag Using A Separate JavaScript File

html

javascript

css

fadeout

fadein