MyNameWouldGoHere MyNameWouldGoHere - 1 year ago 243
CSS Question

Jquery slide div up from bottom of page

So far, I have a div fixed to the bottom of the page, with the bottom margin set to a minus number, so as to hide most of it below the screen. I'd like to create a Jquery button that made it all slide up onto the page, but everything I have tried so far hasn't worked. I'm not so experienced with it, so I've probably been doing it worng.

Anyway, here's my CSS:

.foot {
border-top: 1px solid #999999;
width: 600px;
z-index: 10000;
height: 500px;
color: #000;
background: #FFF;
display: flex;
justify-content: center; /* align horizontal */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -475px;

And my HTML:

<div class="foot">
Copyright 2014 &copy; Tom Gibbs web design. <div class="clocker">hi</div>
<br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4

Code I already tried. It just made the div slide down off the page:


Answer Source

What if you had another class:

    bottom: 0px !important;

    bottom: -475px !important;

which you could add on click:

$(document).ready(function() {
  $('.foot').click(function() {
      if($('.foot').hasClass('slide-up')) {
        $('.foot').addClass('slide-down', 1000, 'easeOutBounce');
      } else {
        $('.foot').addClass('slide-up', 1000, 'easeOutBounce'); 

Make sure you have jQuery UI imported first.

Updated JSFiddle