Currently, I have implemented a script that triggers the animation of content boxes sliding in from the top upon entry and then sliding out from the bottom upon exit.
Although it is functioning almost flawlessly, I am encountering an issue where, when switching between content box one and content box two multiple times, the first box enters from the bottom instead of the top.
I have a theory as to why this occurs (due to the code being executed all at once, resulting in direct transition from below the viewport to above the viewport without a proper entrance sequence), but I am struggling to find a solution to consistently make it enter from the top.
Here is a snippet of the HTML:
<div class="slidey slidey1 enter">
Content Box 1
</div>
<div class="slidey slidey2">
Content Box 2
</div>
<div class="slidey slidey3">
Content Box 3
</div>
Corresponding CSS style:
.slidey { top:-100% }
.enter { top:0; transition: all 0.7s ease-in-out; }
.exit { top:100%; transition: all 0.7s ease-in-out; }
Additionally, the jQuery script used:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".changer").click(function(){
if ($(".slidey" + $(this).data("slidey")).hasClass("enter")) {
return false
} else {
$(".slidey").removeClass("exit");
$(".slidey.enter").addClass("exit").removeClass("enter");
$(".slidey" + $(this).data("slidey")).addClass("enter");
$(".changer").removeClass("link_change");
$(".changer" + $(this).data("slidey")).addClass("link_change");
return false;
}
});
});
</script>
Unfortunately, the page is no longer accessible for viewing.