Question

我有两个问题：

已回答



我应该在jQuery操作中调用哪个选择器，以确保只有＆＃34; Hello World＆＃34;移动？我虽然我只调用它的id iPA是正确的，但即使是按钮也正在应用js动作。

-

我为我的油漆技巧道歉

-

已回答



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

＆＃13;

$("#output")

＆＃13;

$(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);
});
});

＆＃13;

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

＆＃13;

Answer 1

我为每个按钮添加了click方法。正如您在每次单击时看到的那样，您添加了类，并在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>

Answer 2

你需要只为que 1更新你的jQuery和css。以下是代码段。

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

调用后重置操作

2 个答案: