调用后重置操作答案

【问题标题】：Reset action after it was called调用后重置操作
【发布时间】：2017-10-10 21:17:19
【问题描述】：

我有两个问题：

已经回答了

我应该在 jQuery 操作中调用哪个选择器来确保只有“Hello World”移动？虽然我只调用它的 id $("#output") 是对的，但即使是按钮也被应用到 js 动作中。

我为我的绘画技巧道歉

已经回答了

如何确保 jQuery 中的操作重置？在当前代码中，淡入和淡出按钮只工作一次。我希望他们彼此独立地应用操作，以先到者为准（例如，我可以多次单击淡入，一个接一个）。

$(document).ready(function(){

$("#show-button").click(function(){
	$("#output").addClass("fadein-animation");
	setTimeout(function(){
		$("#output").removeClass("fadein-animation"); }, 2000);
});

$("#hide-button").click(function(){
	$("#output").addClass("fadeout-animation");
	setTimeout(function(){
		$("#output").removeClass("fadeout-animation"); },2000);
});
});

  body,
html {
  height: 100%;
  /*to give body and html 100% height of screen*/
}

.flex-container {
  height: 100%;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

.flex-item {
  display: -webkit-flex;
  align-self: center;
}

.window {
  flex-direction: column;
}

.fadein-animation {
  animation-duration: 2s;
  animation-name: fadein;
}

@keyframes fadein {
  from {
    height: 100%;
    opacity: 0;
  }

/*as suggested by @SilverSurfer*/
.buttons-window{
  position: fixed;
  margin-top:25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="window flex-container">
    <div id="output">Hello World!</div>
    <div class="buttons-window">
      <button class="btn btn-primary" id="show-button">Fade In</button>
      <button class="btn btn-warning" id="hide-button">Fade Out</button>
    </div>
  </div>
</body>

【问题讨论】：

选择答案后，我找到了一个更好的解决方案，使用transform: translate();这消除了.buttons-window的类定义的需要
定稿在这里codepen.io/reiallenramos/pen/EwLLNy

标签： javascript jquery html

【解决方案1】：

我为每个按钮添加了点击方法。正如您在每次单击时看到的那样，您添加了类，并在 2 秒后将其删除。希望对您有所帮助：

$(document).ready(function(){
$("#show-button").click(function(){
    $("#output").addClass("fadein-animation");
    setTimeout(function(){
       $("#output").removeClass("fadein-animation");
    },2000);
});
$("#hide-button").click(function(){
    $("#output").addClass("fadeout-animation");
    setTimeout(function(){
    $("#output").removeClass("fadeout-animation");
    },2000);
});
});

body, html{
    height: 100%; /*to give body and html 100% height of screen*/
}

.flex-container{
    height: 100%;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(0,0,0,0.2);

}
.window {
  flex-direction: column;
}
.flex-item{
    display: -webkit-flex;
    align-self: center;
}
.buttons-window{
  position: fixed;
  margin-top:25px;
}

.fadein-animation{
    animation-duration: 2s;
    animation-name: fadein;
}

@keyframes fadein {
  from {
    height: 100%;
    opacity: 0;
  }

  to {
    height: 2.5%;
    opacity: 1;
  }
}

.fadeout-animation{
    animation-duration: 2s;
    animation-name: fadeout;
}

@keyframes fadeout {
  from {
    height: 2.5%;
    opacity: 1;
  }

  to {
    height: 100%;
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="window flex-container">
        <div id="output">Hello World!</div>
        <div class="buttons-window">
            <button class="btn btn-primary" id="show-button">Fade In</button>
            <button class="btn btn-warning" id="hide-button">Fade Out</button>
        </div>
    </div>
    
    
</body>

【讨论】：

谢谢大佬，这是我第二个问题所需要的。你对第一季度有什么想法吗？
@reiallenramos 是的，我会试试，如果我得到它，我会更新答案。
你是救世主。非常感谢！！

【解决方案2】：

您还需要为 que 1 更新 jQuery 和 css。下面是代码sn-p。

$(document).ready(function(){
  $("#show-button").click(myFunc1);
  $("#hide-button").click(myFunc2);
  function myFunc1(){
      $("#output").addClass("fadein-animation");
      $("#output").addClass("fadein");
      $("#output").removeClass("fadeout");
      setTimeout(function(){$("#output").removeClass("fadein-animation");}, 2000);
  }

  function myFunc2(){
      $("#output").addClass("fadeout-animation");
      $("#output").addClass("fadeout");
      $("#output").removeClass("fadein");
      setTimeout(function(){$("#output").removeClass("fadeout-animation");}, 2000);
  }
});

请将以下 css 代码添加到您的 css 文件中：

.fadeout{
  height:90%;
}
.fadein{
  height:auto;
}

【讨论】：

嘿，谢谢伙计。这也行得通，但 SilverSurfer 比你早几秒钟嘿嘿。顺便说一句，您对我的问题 1 有任何想法吗？
我尝试更新 JS 和 CSS，但我看不出与之前的建议有什么不同。先生，您能帮帮我吗？
我更新了我的答案并添加了新的 css 和 js 请相应更新。
@reiallenramos：状态如何？