jQuery slideDown() – 绝对定位div从页面顶部向下滑动,需要从页面上的特定区域滑动 – 如何？

我正在创建一个网站,主页上有一个房子的图像.房子有几扇窗户和一扇门.当用户点击特定窗口时,< div>弹出一些文字.门具有相同的功能,只有我想要< div>弹出一个’向下滑动’效果,我想要这个< div>的位置在门下.所以< div>将从门的位置向下滑动/展开.

我正在使用jQuery的slideDown()方法,但我得到的结果是’pop up div’从页面顶部向下滑动,而不是从绝对定位的< div>它代表了图像上的门.

我的代码片段发布在下面.

我怎样才能得到我正在寻找的结果？

这是Jsfiddle – jsfiddle.net/katura99/A36Fw上的代码

     Box {
                  width:900px;
                  height:55px;
                  margin:auto;
                  margin-top:15px;
            }

            #Poem {
                  width:285px;
                  height:350px;
                  background:#ffffcc;
                  border:1px solid #cccccc;
                  position:absolute;
                  z-index:5;
                  margin-top:435px;
                  margin-left:312px;
            }

            #Close {
                  position:absolute;
                  top:0px;
                  right:15px;
                  color:blue;
                  cursor:pointer;
                  background: url('PNG/close.png');
                  width:36px;
                  height:36px;
        }   

        #Houselogo {
        width:900px;
        height:721px;
        margin:auto;
        position:relative;
        margin-top:0px;
        background:url('PNG/Houselogo.png') no-repeat;
        }

        #spacer {
        width:20px;
        float:left;
        }

        #mission {
        width:300px;
        height:80px;
        font-size:13px;
        font-weight:bold;
        color:#ffffff;
        bottom:390px;
        right:485px;
        position:absolute;
        }

        #window1 {
        width:37px;
        height:42px;
        bottom:388px;
        right:433px;
        position:absolute;
        cursor:pointer;
        }

    #door {
       width:37px;
       height:52px;
       bottom:336px;
       right:420px;
       position:absolute;
       cursor:pointer;
    }
            Box -->
            
Box">