Slide whole div down rather than reveal on slideDown/slideUp

Question

I have a function that when the header reaches a certain div when scroll down, the logo slides down onto the navbar. This works but using the jQuery slide down seems to 'reveal' the div rather than showing the whole div at once and sliding that div down.

What it's doing is normal as i'm using the elements from here:

http://api.jquery.com/slideDown/

But i am after like this example when hovered over navigation: http://aaronjwood.com/

Is there another way using JQuery of css? Any links would be great!

Here is my jQuery to support my question:

$(".logo .visible").hide(); 

    var topOfOthDiv = $("#home-2").offset().top;

    $(window).scroll(function(e) {
        e.preventDefault();
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $(".logo .visible").slideDown(300); //reached the desired point -- show div
        }else{
            $(".logo .visible").slideUp(300);
        }
    });

logo css:

h1.logo {
    width:126px;
    height:58px;
    float:left;
    margin:0 0 0 40px;
    margin-left:40px;

}

.logo .visible{
    display:none;
    height:100%;
    background-color:#2e2e2e;
    background:url(../images//logo.jpg) no-repeat;
}

html

<div id="nav">
        <div class="nav_wrapper">
        <h1 class="logo"><div class="visible"></div></h1>
            <ul id="navigation">
            </ul>
        </div>
     </div>

In the js fiddle, when the item is clicked on, the panel "reveals" itself rather then sliding the div down as whole (like the example link further up ^^). Hope this makes sense.

Link: http://jsfiddle.net/sVCvF/

Answer 1

instead of slideDown you can use animate to slide it down. for example u can use this: http://jsfiddle.net/sVCvF/

$(document).ready(function(){
  $("#flip").on('click', function(){
      $("#panel").animate({'margin-top': 0}, 1000);
  });
});

you do need to use some tweaking on this code