bootstrap 4 custom fade in effect2019 Community Moderator ElectionHow to add transitions/effects to display:blockYellow fade effect with JQueryDisallow Twitter Bootstrap modal window from closingFive equal columns in twitter bootstrapPassing data to a bootstrap modalHow to open a Bootstrap modal window using jQuery?How can I get my Twitter Bootstrap buttons to right align?Change navbar color in Twitter BootstrapWhat is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?jquery / html add class on radio button check, else remove class if radio button not checked?Bootstrap 4 - Glyphicons migration?
Latest web browser compatible with Windows 98
What is the difference between "shut" and "close"?
Do I need to leave some extra space available on the disk which my database log files reside, for log backup operations to successfully occur?
How is the Swiss post e-voting system supposed to work, and how was it wrong?
Is it ok to include an epilogue dedicated to colleagues who passed away in the end of the manuscript?
Best approach to update all entries in a list that is paginated?
Decoding assembly instructions in a Game Boy disassembler
Sword in the Stone story where the sword was held in place by electromagnets
"One can do his homework in the library"
Co-worker team leader wants to inject the crap software product of his friends into our development. What should I say to our common boss?
Ban on all campaign finance?
What does it mean when multiple 々 marks follow a 、?
Touchscreen-controlled dentist office snowman collector game
Provisioning profile doesn't include the application-identifier and keychain-access-groups entitlements
"However" used in a conditional clause?
Why don't MCU characters ever seem to have language issues?
If Invisibility ends because the original caster casts a non-concentration spell, does Invisibility also end on other targets of the original casting?
Excess Zinc in garden soil
Does Linux have system calls to access all the features of the file systems it supports?
Prove that the total distance is minimised (when travelling across the longest path)
Running a subshell from the middle of the current command
Do Bugbears' arms literally get longer when it's their turn?
Who is our nearest neighbor
Is it illegal in Germany to take sick leave if you caused your own illness with food?
bootstrap 4 custom fade in effect
2019 Community Moderator ElectionHow to add transitions/effects to display:blockYellow fade effect with JQueryDisallow Twitter Bootstrap modal window from closingFive equal columns in twitter bootstrapPassing data to a bootstrap modalHow to open a Bootstrap modal window using jQuery?How can I get my Twitter Bootstrap buttons to right align?Change navbar color in Twitter BootstrapWhat is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?jquery / html add class on radio button check, else remove class if radio button not checked?Bootstrap 4 - Glyphicons migration?
0
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.
jquery bootstrap-4 fadein
edited Mar 6 at 18:14
Taplar
16.9k21529
asked Mar 6 at 17:34
PritamPritam
103
add a comment |
0
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.
jquery bootstrap-4 fadein
edited Mar 6 at 18:14
Taplar
16.9k21529
asked Mar 6 at 17:34
PritamPritam
103
add a comment |
0
0
0
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.
jquery bootstrap-4 fadein
edited Mar 6 at 18:14
Taplar
16.9k21529
asked Mar 6 at 17:34
PritamPritam
103
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.
$(".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>$(".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>jquery bootstrap-4 fadein
jquery bootstrap-4 fadein
edited Mar 6 at 18:14
Taplar
16.9k21529
asked Mar 6 at 17:34
PritamPritam
103
edited Mar 6 at 18:14
Taplar
16.9k21529
asked Mar 6 at 17:34
PritamPritam
103
edited Mar 6 at 18:14
Taplar
16.9k21529
edited Mar 6 at 18:14
Taplar
16.9k21529
edited Mar 6 at 18:14
Taplar
16.9k21529
16.9k21529
asked Mar 6 at 17:34
PritamPritam
103
asked Mar 6 at 17:34
PritamPritam
103
asked Mar 6 at 17:34
PritamPritam
103
103
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
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
answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55029059%2fbootstrap-4-custom-fade-in-effect%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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
answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
add a comment |
0
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
answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
add a comment |
0
0
0
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
answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
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
$(".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>$(".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>answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
edited Mar 6 at 18:30
answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
answered Mar 6 at 18:21
Mohamed-YousefMohamed-Yousef
19.8k31224
19.8k31224
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55029059%2fbootstrap-4-custom-fade-in-effect%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
