Div出现盲目效果问题jquery

我写了一个例程，它将动态创建一个div并覆盖另一个div。 我的代码没有错误，但我正在努力做到这一点并没有变得完美。 我认为我的代码中存在逻辑或css相关的问题。 所以我在这里给我的代码请通过，如果可能的话请纠正它。

我的HTML

 
 This is your data. 
 
  

我的CSS

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

我的Jquery例程

  $(document).ready(function () { jQuery.fn.exists = function () { return this.length > 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 = $("
"); 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')) < 0) { oDiv.css('display', 'none'); } return oDiv.animate({ opacity: 'toggle', marginTop: parseInt(oDiv.css('marginTop')) < 0 ? 0 : ('-' + margin_top + 'px') }, speed, easing, callback); }; }); $(document).ready(function () { $('#blinddwn').click(function () { $('#box-outer').blindToggle('slow'); return false; }); }); 

如果有人运行代码，那么他/她看到BlindBox div没有正确覆盖我的另一个名为box-outer的div。 请看看我的日常工作并告诉我这是什么问题。 如果可能的话纠正它

在这里我给另一个url链接http://jsfiddle.net/tridip/YdnLd/8/只需点击这里，你会看到我试图完全通过代码的效果。 我希望通过我的代码做同样的效果。 所以请告诉我我的代码中有什么问题。 谢谢