'slideDown' effect with jquery doesnt seem to work

I want to use slideDown effect with jquery effect, however it doesnt appear to work. I think it is because the element on which I am trying to implement the effect is already visible on the screen. I think it may be required t开发者_运维问答o be hidden before it can show up a slideDown effect but I am unsure as to how to implement that. Any guidance on this appreciated.

Try this one

$(document).ready(function() {    
    $("div#id").hide().slideDown();
});

Try to add the CSS property "display: none;" to your element. See jsfiddle.