CODEWITHSUNDEEP
javascriptjqueryhtmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

SlideUp effect with jQuery

I'm currently working on my website footer and would like it if the user clicks Contact Us that a yellow div appears from behind the footer.

Here is what I'm working on so far right now, but I can't seem to position the yellow box hidden behind the footer. The yellow area will be roughly 300px in height when visible.

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "40px"});
    }
});
footer {
  width:100%;
  display:block;
  background:#ccc;
  position:fixed;
  bottom:0;
  left:0
}

.container {
    overflow:hidden;
    height: 60px;
    float:left;
}
.one {
    position: relative;
    bottom: 0;
    background-color: lightblue;
    z-index: 1;
    cursor:pointer;
    overflow: hidden;
    height: 40px;
}
.two {
    position: relative;
    bottom: 40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
    <div class="two">I slide!<br>And I am higher than the div before me...</div>
</div>

<footer>
  <ul>
  <li><a href="">Privacy Policy</a></li>
  <li><a href="#" class="one">Contact Us</a></li>
  </ul>
</footer>

Upvotes: 2

Views: 84

Answers (2)

Joe Kdw
Joe Kdw

Reputation: 2261

Here's work slide:

.container {
    overflow: hidden;
    height: 60px;
    float: left;
    position: absolute; /*add this, and */
    bottom: 20px; /* this*//*pixel based on what you wish*/
}

UPDATED DEMO:
Check Update Fiddle Here

Upvotes: 4

atomSmasher
atomSmasher

Reputation: 1465

Try this one. It uses jQuery animate to slide.

http://jsfiddle.net/armqc25a/

JS

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".container").animate({"bottom": "0px"});
    }
    else
    {
        clicked=true;
        $(".container").animate({"bottom": "40px"});
    }
});

CSS

footer {
  width:100%;
  background:#ccc;
  position: fixed;
  bottom:0;
  height: 40px;
  left:0;
  z-index: 1000;
}

.container {
    overflow:hidden;
    height: 40px;
    position: absolute;
    bottom:0;
    width: 100%;
    z-index: 1;
}
.one {
    position: relative;
    background-color: lightblue;
    cursor:pointer;
}
.two {
    position: relative;
    background-color: yellow;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

Upvotes: 2

Related Questions