Javascript - Apparition div " coullisant "

Bonjour,

regarde du côté de la librairie mootools -> http://mootools.net/demos/

Merci pitxu pour ta réponse mais je ne cherche pas une librairie mais une fonction très simple sous la forme d'une boucle qui ajoute 1px de hauteur toute les 1/4 de seconde jusqu'à un certain nombre et ensuite que sa fasse l'inverse jusqu'à faire disparaître le div. Si quelqu'un a une idée ...

Salut,

Je t'ai développer un p'tit truc:

<html>  
<head>  
 <title></title>  
 <style type="text/css">  
  body{  
   padding:0;  
   margin:0;  
   background-color:#343434;  
   text-align:center;  
  }  
  #global{  
   margin:0 auto;  
   overflow:hidden;  
   border:#fff solid 5px;  
   width:500px;  
   position:relative;  
  }  
  #description{  
   position:absolute;  
   left:0;  
   background-color:#333;  
   opacity:.8;  
   color:white;  
   padding:5px;  
  }  
 </style>  
</head>  
<body>  
 <div id="global">  
  <img src="http://lorempixel.com/500/500"/>  
  <div id="description" style="bottom:0px">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  </div>  
 </div>  
 <script type="text/javascript">  
  var Slideshow = [];   
  Slideshow.description = {  
   //Ne pas toucher à ces variables  
   _element:null,  
   _parentElement:null,  
   _top:0,  
   _height:0,  
   _timer: null,  
   //Régler la vitesse ici  
   _interval: 20, // interval en ms  
   _speed: 10, //Déplacement en pixel  
   _initialize: function(){  
    this._element = document.getElementById('description');  
    this._parentElement = document.getElementById('global');  
    this._height = this._element.offsetHeight;  
    this.setBottom(this._element.style.bottom = -this.getHeight());  
    this.setEventsListener();  
   },  
   getHeight: function(){  
    return this._height;  
   },  
   getBottom: function(){  
    return parseInt(this._element.style.bottom);  
   },  
   setBottom: function(value){  
    value = (value <= 0) ? value: 0;  
    value = (value > -this.getHeight()) ? value: -this.getHeight();  
    this._element.style.bottom = value;  
    if(-(this.getHeight()) >= this.getBottom() ||this.getBottom() == 0){  
     return false;  
    }else{  
     return true;  
    }  
   },  
   setBottomTo: function(value){  
    var obj = Slideshow.description;  
    if(value == 0){  
     if(!obj.setBottom(obj.getBottom() - obj._speed)){  
      obj.clearTimer();  
     }  
    }else{  
     if(!obj.setBottom(obj.getBottom() + obj._speed)){  
      obj.clearTimer();  
     }  
    }  
   },  
   setEventsListener: function(){  
    var obj = this;  
    this._parentElement.addEventListener("mouseover", function(e){obj.setTimer(e)}, false);    
    this._parentElement.addEventListener("mouseout", function(e){obj.setTimer(e)}, false);   
   },  
   setTimer: function(event){  
    this.clearTimer();  
    var bottom = 0;  
    if(event.type === "mouseover"){  
     bottom = this.getHeight();  
    }  
    var obj = this;  
    obj._timer = window.setInterval(obj.setBottomTo, obj._interval, bottom);  
   },  
   clearTimer: function(){  
    clearInterval(this._timer);  
   }  
  }  
  Slideshow.description._initialize();  
 </script>  
</body>  
</html>

A adapter selon tes besoins

@prosthetiks Merci, je test ce script dès que je peux.

De rien, si tu as besoin d'aide pour le modifier demande, je l'ai pas commenté des masses...

Ok, merci :)

Bonjour, je n'arrive pas à adapter le code, en fait j'ai document.getElementById('notification') qui au départ est à height:0px; et j'aimerai qu'il passe progressivement à height:30px; puis au bout de 10 secondes qu'il fasse l'inverse qu'il passe de height:30px à height:0px;

J'ai finalement réussi à obtenir l'effet que je souhaiter mais il y a un problème, lorsque c'est aux fonctions DeplaceHeaderBAS_vers_HAUT() et DeplaceConteneurBAS_vers_HAUT() de jouer au début sa fonctionne bien mais après le div header se met à avoir " un top " négatif qui s'incrémente toute les 4 ou 5 secondes, je n'arrive pas à comprendre pourquoi. Pouvez-vous m'aider ?

<script>
function DeplaceHeaderHAUT_vers_BAS()
{
var DivHeader;
DivHeader = document.getElementById('header');
DivHeader.style.top=DivHeader.offsetTop+1+'px';
if(DivHeader.offsetTop <= 36){setTimeout('DeplaceHeaderHAUT_vers_BAS()', 10);}
}
function DeplaceConteneurHAUT_vers_BAS()
{
var DivConteneur;
DivConteneur = document.getElementById('conteneur');
DivConteneur.style.top=DivConteneur.offsetTop+1+'px';
if(DivConteneur.offsetTop <= 70){setTimeout('DeplaceConteneurHAUT_vers_BAS()', 10);}
}


function DeplaceHeaderBAS_vers_HAUT()
{
var DivHeader;
DivHeader = document.getElementById('header');
DivHeader.style.top=DivHeader.offsetTop-1+'px';
if(DivHeader.offsetTop <= 36){if(DivHeader.offsetTop > 0){setTimeout('DeplaceHeaderBAS_vers_HAUT()', 10);}}
}
function DeplaceConteneurBAS_vers_HAUT()
{
var DivConteneur;
DivConteneur = document.getElementById('conteneur');
DivConteneur.style.top=DivConteneur.offsetTop-1+'px';
if(DivConteneur.offsetTop <= 70){if(DivConteneur.offsetTop > 34){setTimeout('DeplaceConteneurBAS_vers_HAUT()', 10);}}
}

function changement_notification_arrive()
{

document.getElementById('notification').style.display='block';
DeplaceHeaderHAUT_vers_BAS();
DeplaceConteneurHAUT_vers_BAS();

setTimeout("changement_notification_arrete()", 15700);

}


function changement_notification_arrete()
{

document.getElementById('notification').style.display='none';
DeplaceHeaderBAS_vers_HAUT();
DeplaceConteneurBAS_vers_HAUT();

setTimeout("changement_notification_arrete()", 15700);

}

var skText = '';
function refresh_div_notification()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'POST';
var filename = 'refresh-notification';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{

if(xhr_object.readyState == 4)
{
var tmpNotif = '';
var tmpNotif = xhr_object.responseText;

if(xhr_object.responseText != skText)
	{
if(xhr_object.responseText != '<html><body></body></html>')
{
changement_notification_arrive();
        document.getElementById('notification').innerHTML = skText = xhr_object.responseText;
	document.getElementById('notification').innerHTML = tmpNotif;

fade( document.getElementById('notification'), 1 );
setTimeout("fade( document.getElementById('notification'), 0 )", 15000);
}
	}
}
}
xhr_object.send(null);
setTimeout('refresh_div_notification()', 5000);
}
</script>