CODEWITHSUNDEEP
javascriptjqueryhtml
reiallenramos
reiallenramos

Reputation: 1295

Reset action after it was called

I have two questions:

Answered already

  1. 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 enter image description here

--

Answered already

  1. 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>

Upvotes: 0

Views: 155

Answers (2)

SilverSurfer
SilverSurfer

Reputation: 4366

I added click method for each button. As you see on each click you add the class, and remove it after 2 seconds. Hope it helps:

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

Upvotes: 1

JavidRathod
JavidRathod

Reputation: 483

You Need to Just Update your jQuery and css also for que 1. Below is the code snippet.

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

Please add below css Code to your css file:

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

Upvotes: 0

Related Questions