javascript - 调用后重置操作

我有两个问题:

Answered already

Which selector should I call in jQuery action to make sure that only "Hello World" moves? I though I was right to call only its id $("#output"), but even the buttons are being applied the js actions.

I apologize for my paint skills

Answered already

How do I make sure that the actions in jQuery reset? In the current code, the Fade in and Fade Out buttons only work once. I want them to apply the action independent of each other, whichever comes first (for example, I can click Fade In multiple times, one after another).

$(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>

最佳答案

我为每个按钮添加了点击方法。正如您所看到的，每次单击都会添加该类，并在 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>

关于javascript - 调用后重置操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46666580/

javascript - 调用后重置操作

上一篇：javascript - 合并 jQuery 代码

下一篇：javascript - 计算名称选择器控件的csjs id