I've been working on a div animation where the original position of the div from the top is set at 70% and the div itself is set as absolute. However, when I click on a button, it slides to the bottom of the page with a top value of 95%.
Now, my goal is to check if the position has reached top:95%, and if so, slide it back to top:70%.
For some reason, the div slides down to 95%, but doesn't come back up. What am I doing wrong here?
CSS:
#mainMenu {
width: 100%;
height: 30px;
background-color: black;
top: 70%;
position: absolute;
}
body {
margin: 0px;
}
#clickToCheck {
font-size: 22px;
}
JQuery:
<script>
$(document).ready(function () {
$('#mainMenu').click(function () {
$("#mainMenu").animate({ top: "95%" }, 1100);
});
});
$(document).ready(function () {
$('#clickToCheck').click(function () {
if ($('#mainMenu').position().top === '95%') {
$("#mainMenu").delay(1000).animate({ top: "70%" }, 1200);
} else {
alert('It's not at the bottom');
}
});
});
HTML:
<body>
<span id="clickToCheck">Click to Check</span>
<div id="mainMenu"></div>