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

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

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

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

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

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 -->