addClass after animate not working properly with jquery.
When I click on a button I am trying to bring the banner from the bottom up and when the user clicks again, it will go back to the bottom and hide away.
below is the code I have so far. The first part works, but the second part it doesn't slide down.. simply goes away instead.
Any help is appreciated.
Thanks!
$(document).ready(function() {
$("#projs").click(function() {
if ($("#projList").hasClass('hideAway')) {
$("#projList").removeClass('hideAway').animate({
bottom: '25%'
});
} else {
$("#projList").animate({
bottom: '0'
}).addClass('hideAway'); //.addClass('hideAway');
}
});
});.hideAway {
visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
<table style="margin:0px;width:100%;padding:0px;">
<tr>
<td bgcolor="#EA664A" align="center" height="75" width="75">
</td>
<td bgcolor="#D8B90C" align="center" height="75" width="75">
</td>
</tr>
<tr>
<td bgcolor="#0CD836" align="center" height="75" width="75">
</td>
<td bgcolor="#1AD8E3" align="center" height="75" width="75">
</td>
</tr>
</table>
</div>