Div appear with blind effect issue jquery
<p>i have written a routine which will create a div on the fly and cover another div. my code works with no error but which i am trying to do which is not getting perfect. i thinks there is logical or css related problem in my code. so here i am giving my code please go through and if possible then please rectify it.</p>

<h2>my html</h2>

<pre><code>&lt;div id="box-outer"&gt;
    &lt;div id="data-box"&gt;
        This is your data.
    &lt;/div&gt;
 &lt;/div&gt;
 &lt;asp:Button ID="blinddwn" runat="server" Text="BLIND-2-DOWN" /&gt;
</code></pre>

<h2>MY CSS</h2>

<pre><code> #box-outer
    {
        overflow: hidden;
        height: 200px;
        width: 200px;
        margin: 20px;
        padding: 10px;
        background-color:Green;
    }
</code></pre>

<h2>MY Jquery routine</h2>

<pre><code> $(document).ready(function () {
        jQuery.fn.exists = function () { return this.length &gt; 0; }

        jQuery.fn.blindToggle = function (speed, easing, callback) {
            var oDiv;
            var margin_top = this.outerHeight() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));

            if ($("#BlindBox").exists() == false) {
                var _height = this.outerHeight();
                var _width = this.outerWidth();

                oDiv = $("&lt;div id='BlindBox'&gt;&lt;/div&gt;");
                oDiv.css("height", _height + 'px');
                oDiv.css("width", _width + 'px');
                oDiv.css("margin-top", ('-' + margin_top + 'px'));
                oDiv.css("padding", "10px");
                oDiv.css("background", "#e459e9");
                oDiv.css("position", "relative");
                oDiv.css("display", "none");
                this.append(oDiv);
            }
            else {
                oDiv = $('#BlindBox');
            }


            if (parseInt(oDiv.css('marginTop')) &lt; 0) {
                oDiv.css('display', 'none');
            }

            return oDiv.animate({ opacity: 'toggle',
                marginTop: parseInt(oDiv.css('marginTop')) &lt; 0 ? 0 : ('-' + margin_top + 'px')
            }, speed, easing, callback);

        };
    });

        $(document).ready(function () {
            $('#blinddwn').click(function () {
                $('#box-outer').blindToggle('slow');
                return false;
            });
        });
</code></pre>

<p>if anyone run the code then he/she see that BlindBox div is not properly covering my another div called box-outer. please have look at my routine and tell me what is the problem. rectify it if possible</p>

<p>here i am giving another url link <a href="http://jsfiddle.net/tridip/YdnLd/8/" rel="nofollow">http://jsfiddle.net/tridip/YdnLd/8/</a> just click here and you will see the effect which i am trying to fully by code. this same effect i want to do by my code. so please tell me what is the problem in my code. thanks</p>
