jQuery slideDown() - absolu placé div glisser vers le bas à partir du haut de la page, besoin de glisser d'un espace spécifique sur la page comment faire?
Je suis en création d'un site web où la page d'accueil a une image d'une maison. La maison dispose d'un peu de fenêtres et une porte. Lorsqu'un utilisateur clique sur une fenêtre particulière, un <div> apparaît avec un peu de texte. La porte a la même fonctionnalité, seulement, je voudrais, pour <div> qui apparaît à avoir un 'glissant' effet et je veux que la position de cette <div> être sous la porte. Ainsi, le <div> serait glisser vers le bas et d'élargir à partir de la porte est en place.
Je suis en utilisant de jQuery slideDown() la méthode, mais le résultat que j'obtiens est que le "pop up div' est glissant vers le bas à partir du haut de la page, et non de l'absolu placé <div> qui représente la porte sur l'image.
Un extrait de mon code est affiché en dessous.
Comment puis-je obtenir les résultats que je suis à la recherche d'?
Voici le code sur JsFiddle -
<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>Erreur de ma part, lorsque je met mon post ensemble, j'ai oublié d'inclure le code de la 'porte'. Je viens d'édité mon post pour l'inclure.
Je ne vois aucune référence à jQuery dans votre code. Veuillez nettoyer votre code et, si possible, de poster un jsFiddle exemple.
Chers veuillez fournir violon qui sera très utile pour résoudre vos problèmes.
désolé, encore une fois, j'ai oublié que j'ai été la construction de l'extrait de code pour poster ici - va faire un autre éditer pour y remédier maintenant.
OriginalL'auteur katura | 2012-03-19
Vous devez vous connecter pour publier un commentaire.
Voir ci-dessous les violons pour votre solution
Violon: http://jsfiddle.net/A36Fw/2/
Démo: http://jsfiddle.net/A36Fw/2/embedded/result/
Remarque: vous pouvez ajuster la position de la gauche et le haut de poème div selon votre besoin.
Je me sens heureux de résoudre votre problème... si toute aide à l'avenir, je suis ici, mon ami.
Merci beaucoup:)
OriginalL'auteur w3uiguru