Я создаю веб-сайт, на главной странице которого изображен дом.В доме есть несколько окон и дверь.Когда пользователь нажимает на определенное окно, появляется <div> с некоторым текстом.Дверь обладает той же функциональностью, только мне бы хотелось, чтобы <div>, который всплыл, имел эффект 'скользящий вниз' , и я хочу, чтобы положение этого <div> находилось под дверью.Таким образом, <div> будет скользить вниз / расширяться от места, где расположена дверь.
Я использую метод slideDown () jQuery , но в результате я получаю, что 'pop up div' скользит вниз от верхней части страницы, а не от абсолютного положения <div>, которое представляет собой дверь на изображении.
Выложен фрагмент моего коданиже.
Как мне получить результаты, которые я ищу?
Вот код на JsFiddle -
jsfiddle.net / katura99 / A36Fw <html>
<head>
<script src="JQuery/jquery-1.7.1.js"></script>
<script>
$('#door').click(function() {
$("#Poem").slideDown(3000);
});
</script>
</head>
<style type="text/css">
.main {
width:100%;
}
.mainContentBox {
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;
}
</style>
<body>
<div class="main">
<!--main box -->
<div class="mainContentBox">
<!-- P O E M -->
<div id="Poem" align="center">
<div rel="scrollcontent1">
Content text here
</div>
<div id="Close" onclick="closeDiv('Poem')"></div>
</div>
<div id="spacer"> </div><img src="PNG/MyLogo.png"/>
<img src="PNG/LogoSubText.png"/>
</div>
<div id="HouseLogo">
<div id="mission" style="">
additional content here
<br/><br/>
<table align="center">
<tr>
<td style="font-size:13px;font-weight:bold;color:#FFFF00;">
<div id="showMissionStatement" style="cursor:pointer">... Click here to Learn More About Us!... </div>
</td>
</tr>
</table>
</div><!--HouseLogo-->
<div id="window1" onmouseover="largeWindow('window1')" onmouseout="this.style.background='';">
</div>
<div id="door" onmouseover="largeDoor()" onmouseout="this.style.background='';">
</div>
</div>
</body>
</html>