Check out the codepen here: https://codepen.io/anon/pen/gRJEwx
Essentially, with jQuery toggle 'slide', the div slides in and right back out. It seems to only happen every second or third time the button is pressed. The first try never triggers it, but after clicking the back button, it tends to work on the second or third attempt.
$('#go').on('click', function() {
$('#s1').fadeOut('slow', function() {
$('#s2').toggle('slide', {
direction: 'right'
}, 800, function() {
$('#s2 .back').on('click', function() {
$('#s2').fadeOut('slow', function() {
$('#s1').toggle('slide', {
direction: 'right'
}, 800);
});
});
});
});
});body {
overflow: hidden;
width: 400px;
background: gray;
height: 400px;
}
#s1,
#s2 {
width: 100%;
height: 100%;
}
#s1 {
padding: 20px;
display: block;
background: purple;
}
#s2 {
padding: 20px;
display: none;
background: blue;
}
#s3 {
display: none;
background: black;
}
#go,
#go2 {
width: 400px;
padding: 10px 0;
margin: 20px auto;
text-align: center;
font-weight: bold;
background: white;
}
.back {
background: white;
font-weight: bold;
width: 300px;
padding: 10px 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s1">
<div id="go">GO TO SCREEN2</div>
</div>
<div id="s2">
<div class="back">GO BACK</div>
</div>On the initial attempt, everything works fine. However, when trying for the second time, the second screen briefly shows up and then disappears immediately. Any suggestions on how to make it slide and remain visible until the back button is clicked?