11521 sujets

JavaScript, DOM et API Web HTML5

Volet déroulant fonctionnant que en inspecteur

Messieurs Dames, bonjour !

config presta : 1.6.1.13

Alors, je n'ai jamais vu ça de ma vie ... je vais vous expliquer le problème.

J'ai une div (comedown) qui agit comme volet déroulant de bas en haut laissant apparaître 4 liens grâce a un onclick sur un bouton.

voici le css de ma div :
#comedown {
	background-color: #ff5354;
	position: absolute;
    right: 0;
    left: 0;
	top: 850px;
    width: 100%;
    height: auto;
    margin: auto;
    will-change: transform;
    z-index: 11;
    height: 750px;
    overflow: hidden;
    display: none;
    transition: top 1.5s;
    -webkit-transition: top 1.5s;
}


J'y est ajouté ce code JS :

<script>

        function masquer_div()
{

if (document.getElementById('comedown').style.top == '100%')
  {
       document.getElementById('comedown').style.top = '0';
  }
  else 
  {
       document.getElementById('comedown').style.top = '100%';
  }
if (document.getElementById('comedown').style.display == 'none')
  {
       document.getElementById('comedown').style.display = 'block';
  }
  else 
  {
       document.getElementById('comedown').style.display = 'none';
  }
}
	document.getElementById('btn_back').onclick = masquer_div;
		document.getElementById('btn_show').onclick = masquer_div;
			document.getElementById('btn_effect').onclick = masquer_div;


</script>

Ce que je souhaite obtenir c'est un volet déroulant vers le haut qui arrive en 1.5 seconde.

Alors sur le onclick de mon bouton tout fonctionne, je passe effectivement de top 100% a top 0 et de même pour le display.

En revanche en ce qui concerne la transition... lorsque je suis sur l'inspecteur pour vérifié que le code est bien accepté et que je click sur le bouton, la transition se fait en 1.5secondes et nous avons bien cet effet de "volet déroulant" mais quand je suis sur la page et que l'inspecteur n'est pas afficher et que je click, plus aucune transition mais la div qui apparaît instantanément en haut de la page...

Merci d'avance
Petit up j'ai réussi grâce a ce code : 

<script src='jquery-3.1.0.js'></script>

<script type="text/javascript">
$(document).ready(function () {
	$('#btn_effect').click(function(){
		$('#comedown').slideDown(1500);

		});
});


mais il arrive par le haut, un moyen de le faire arriver par le bas ? merci
Non le slide up sert à masquer ... je l'ai utiliser pour fermer l'apparition de la div avec un btn
Sujet clos
Aller à