1

I am trying to add a fade in effect whenever user clicks on next or previous button. Here is my code

https://jsfiddle.net/tnb6fxe4/1/

$(".nextBtn").click(function(e) {
  var curr = $(".d-block");
  var next = curr.next(".form-group")
  if(next.length) {
  curr.removeClass("d-block");
  curr.addClass("d-none");
  next.removeClass("d-none");
  next.addClass("d-block");
  }
});

$(".prevBtn").click(function(e) {
  console.log("ye")
  var curr = $(".d-block");
  var prev = curr.prev(".form-group")
  if(prev.length) {
  curr.removeClass("d-block");
  curr.addClass("d-none");
  prev.removeClass("d-none");
  prev.addClass("d-block");
  }
});
@import url(//fonts.googleapis.com/earlyaccess/notosansbengaliui.css);

body {
  background: url("https://picsum.photos/200/300/?blur&image=719"); /*blurry fire*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Noto Sans Bengali UI', sans-serif !important;
}
.auth ,.auth legend, .auth .group1 button {
  color: white;
}
h2 {
  text-align:center;
  padding: 20px
}
.group1 button {
  background-color:transparent;
  color:white;
  border: 1px solid white;
  border-radius: 5px;
} 
.button:not(:last-child) {
  border-right: none;
}
.group1 button:hover {
  padding-right: 30px;
  padding-left: 30px;
  text-align: center;
  border: 1px solid white;
  transition: .1s linear;
  -webkite-transition: .1s linear;
  -moz-transition: .1s linear;
  -o-transition: .1s linear;
}

input[type="text"],
input[type="password"] {
  border:none;
  border-bottom: 1px dotted white;
  background-color:transparent;
  color: white;
  width: 100%;
  margin: 10px;
}

input[type="file"] {
  margin: 10px;
}

textarea {
  width: 100%;
  border-radius: 5px;
  background-color: transparent;
  color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container auth">
  <form>


    <div class="form-group d-block">
      <p class="h4">some content</p>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
    </div>

    <div class="form-group d-none">
      <p class="h4">other content</p>
      <p>

        foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo

      </p>
    </div>

    <div class="btn-group btn-group-lg group1">
      <button type="button" class="btn prevBtn">Previous</button>
      <button type="button" class="btn nextBtn">Next</button>
    </div>
  </form>
</div>
</div>

I tried to add "fade" class to each form-group but that stopped displaying the div. Please help.

Taplar
  • 24,788
  • 4
  • 22
  • 35
Pritam
  • 333
  • 3
  • 13

1 Answers1

2

Unfortunately You cannot add effects while you're using display:block and display:none to show/hide elements.. To be able to make effects you can use opacity , visibility , height , transition .. See the next example

$(".nextBtn").click(function(e) {
  var curr = $(".do-block");
  var next = curr.next(".form-group")
  if(next.length) {
  curr.removeClass("do-block");
  curr.addClass("do-none");
  next.removeClass("do-none");
  next.addClass("do-block");
  }
});

$(".prevBtn").click(function(e) {
  console.log("ye")
  var curr = $(".do-block");
  var prev = curr.prev(".form-group")
  if(prev.length) {
  curr.removeClass("do-block");
  curr.addClass("do-none");
  prev.removeClass("do-none");
  prev.addClass("do-block");
  }
});
@import url(//fonts.googleapis.com/earlyaccess/notosansbengaliui.css);

body {
  background: url("https://picsum.photos/200/300/?blur&image=719"); /*blurry fire*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Noto Sans Bengali UI', sans-serif !important;
}
.auth ,.auth legend, .auth .group1 button {
  color: white;
}
h2 {
  text-align:center;
  padding: 20px
}
.group1 button {
  background-color:transparent;
  color:white;
  border: 1px solid white;
  border-radius: 5px;
} 
.button:not(:last-child) {
  border-right: none;
}
.group1 button:hover {
  padding-right: 30px;
  padding-left: 30px;
  text-align: center;
  border: 1px solid white;
  transition: .1s linear;
  -webkite-transition: .1s linear;
  -moz-transition: .1s linear;
  -o-transition: .1s linear;
}

input[type="text"],
input[type="password"] {
  border:none;
  border-bottom: 1px dotted white;
  background-color:transparent;
  color: white;
  width: 100%;
  margin: 10px;
}

input[type="file"] {
  margin: 10px;
}

textarea {
  width: 100%;
  border-radius: 5px;
  background-color: transparent;
  color: white;
}


/* added classes */
.do-block {
  height : auto;
  opacity : 1;
  visibility : visible;
  transition-duration: 2s;
}

.do-none {
 height : 0px;
 opacity : 0;
 visibility : hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  
  <body>
    <div class="container auth">
        <form>
          
           
       <div class="form-group do-block">
       <p class="h4">some content</p>
       <p>
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah
       </p>
      </div>
          
      <div class="form-group do-none">
      <p class="h4">other content</p>
      <p>
      
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo 

      </p>
      </div>
          
  <div class="btn-group btn-group-lg group1">
    <button type="button" class="btn prevBtn">Previous</button>
    <button type="button" class="btn nextBtn">Next</button>
  </div>
</form>
</div>
</div>
  </body>
</html>

Note I changed d-block , d-none to do-block , do-none in the html,js and added there classes to the bottom of the css style sheet .. Also this code above needs a little bit of work to make it not pushing down when show/hide elements you may need to set fixed height to the form-group instead of height : auto , 0 for the elements or you may use absolute position .. Anyways you can start from the above example

Also take a lot at How to add transitions/effects to display:block

Mohamed-Yousef
  • 23,946
  • 3
  • 19
  • 28