How to make somthing appear to unfold from the top with jquery

Question

See this question.

How to show popup message like in stackoverflow

I am trying to get the overhang to appear gracefully in jquery from the top, like someone is pulling the bottom of it and it all follows instead of having it fade in.

I cannot figure out how to do this in jQuery.

Can you help?

What's wrong with the answer you linked to? Have you tried that? — mrtsherman, Jun 13 '12 at 18:48
The answer in your link is perfect and is builded using jQuery... — Andrea Turri, Jun 13 '12 at 18:49
The div appears by fading in. I want it to slide down. Just thought, maybe slide()? — yehuda, Jun 13 '12 at 18:51

score 1 · Answer 1 · answered Jun 13 '12 at 18:54

Make use of slideToggle then.

http://jsfiddle.net/62HeB/1

Not sure how you are triggering it, so I used a button.

div {
    position: fixed; 
    top: 0; 
    width: 200px; 
    border: 1px solid gray; 
    background: lightgray; 
    border-radius: 0px 0px 5px 5px; 
    padding: 5px; 
    left: 50%;
    margin-left: -100px;
}

score 1 · Accepted Answer · answered Jun 13 '12 at 18:54

1

This should work using Slide.

$(document).ready(function() {
        $("#message").slideDown("slow");
        $("#message a.close-notify").click(function() {
            $("#message").slideUp("slow");
            return false;
        });
    });

answered Jun 13 '12 at 18:54

Andrea Turri

6,480
7
37
63

How to make somthing appear to unfold from the top with jquery

2 Answers2