jQuery Slide Hidden Content From Top Of Screen

I've create a jsFiddle here: http://jsfiddle.net/JNnNr/
Click the broken image and my content will pop up.
I would like my content to slide in from the top of the browser window and stop in the center.
<div id="assignments-main-container">
    <img id="show-hidden-popup" class='click-assignments' src="~/Content/ImagesAppBar/appBar-Assignment.png" style="width: 58px; height: 50px;" />
    <p class='click-assignments' style="margin-top: 5px; font-size: x-small;">
        Assignments
    </p>

    <style type="text/css">
        .notifier-Container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            display: none;
            background: rgba(64, 64, 64, .4);
            /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);*/
            cursor: default;
        }

        .notifier-Inner {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -120px;
            margin-left: -175px;
            width: 350px;
            height: 240px;
            font-family: Tahoma;
            font-size: 10pt;
            color: rgb(0,0,0);
            border: 1px solid rgb(119,136,153);
            background-color: rgb(255,255,255);
            opacity: 1;
            -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
            -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
            box-shadow: 10px 10px 10px #000; /* CSS3 */
            z-index: 102;
            cursor: default;
        }

        .notifier-Content {
            width: 318px;
            height: 125px;
            padding: 5px;
            margin: 10px;
            margin-top: -15px;
            color: rgb(139,0,0);
            font-family: Tahoma;
            font-size: 12pt;
        }

        .lbl-Notification {
            color: rgb(139,0,0);
            font-family: Tahoma;
            font-size: 11pt;
        }

        .notice-CloseContainerLink {
            text-decoration: none;
            color: rgb(245,128,38);
            font-weight: bold;
            font-family: Tahoma;
            font-size: 10pt;
            cursor: pointer;
        }

        .notice-CloseContainerImage {
            float: right;
            position: relative;
            left: 18px;
            top: -20px;
            width: 34px;
            height: 35px;
            cursor: pointer;
        }

        .notice-CloseTextLinkContainer {
            clear: both;
            width: 55px;
            height: 25px;
            line-height: 25px;
            vertical-align: middle;
            text-align: center;
            float: right;
            bottom: 20px;
            right: 150px;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var overlay = $('<div id="overlay"></div>');
            // Show or hide the notice container
            $("#show-hidden-popup").click(function () {
                $("#notice-InfoContainer-assignments").show();
            });

            $('#notice-CloseContainerLink').click(function () {
                $('#notice-InfoContainer-assignments').hide("slow");
                overlay.appendTo(document.body).remove();
            });

            $('.notice-CloseContainerImage').click(function () {
                $('#notice-InfoContainer-assignments').hide("slow");
                overlay.appendTo(document.body).remove();
            });
        });
    </script>
    <div id="notice-InfoContainer-assignments" class="notifier-Container" style="display: none;">
        <div id="notice-InfoInner-assignments" class="notifier-Inner">
            <img src="~/Content/ImagesAppBar/x-Close.png" alt="quit" class="notice-CloseContainerImage" id="x-home-assignments" />
            <div id="notice-Content-assignments" class="notifier-Content">
                Information Notice:<br />
                @*@Html.Label("{Welcome to Assignments Partial View}", new { @class = "lbl-Notification" })*@
                <label class="lbl-Notification">Welcome to Assignments Partial View</label>
            </div>
            <div class="notice-CloseTextLinkContainer">
                <a class='notice-CloseContainerLink'>Close</a>
            </div>
        </div>
    </div>
</div>

Open in new window

GenericCogAsked:
Who is Participating?
 
mickey159Commented:
The working demo:

http://jsfiddle.net/JNnNr/3/


Change the number 500 in
$('.notifier-Inner').show().animate({'top':'50%'},500);

Open in new window

to change the duration for moving.

If you have questions, feel free to ask me.
0
 
Jagadishwor DulalBraces MediaCommented:
Can you provide a image for animation ? I think you need show slow

 $("#show-hidden-popup").click(function () {
                $("#notice-InfoContainer-assignments").show("slow");
            });

Open in new window

0
 
GenericCogAuthor Commented:
@jagadishdulal, the .show("slow") method simply implements a "fade-in" effect from the position I set in the CSS.  I do not want to use an image to slide down from the top of the browser, jQuery does not require it as it can animate the div.  However, the animate() method does not show a hidden element so I'm looking for a some magic trickery to get the job done!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mickey159Commented:
A much simpler version here:

http://jsfiddle.net/JNnNr/4/

BTW, using long id and class names are confusing and bad for maintenance. To make it easier, try using shorter names. Hope this helps!!
0
 
GenericCogAuthor Commented:
The slide effect back up does not work, however, since I did not explicitly ask for that in this question, I cannot complain!!
Great work, thank you so much!
0
 
mickey159Commented:
Slide effect upwards:

http://jsfiddle.net/JNnNr/6/

I don't mind, just ask me and I will answer. Do complain!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.