Transition en Javascript

31 octobre 2014 à 20:30:30

Bonjour, je débute en javascript est aujourd'hui je doit essayez de rendre mon site un peux plus dynamique et en faite je voudrais mettre une transition car ma div se coupe nettement et "degeulace".

function AffichageInfo_load(){

	setTimeout(function(){document.getElementById("info_js").style.display = "none";},5000)
}

function AffichageInfo_Hide(){

	document.getElementById("info_js").style.display = "inline";
	setTimeout(function(){document.getElementById("info_js").style.display ="none";},10000)
}

<body onload="AffichageInfo_load()">

	<div id="container_general">

		<div id="container_player" onmouseover="AffichageInfo_Hide()">

// Y'a du code derrière

Mais je voudrais savoir comment mettre une belle transition?

-
Edité par Warkas 31 octobre 2014 à 21:06:02

arnaud49

31 octobre 2014 à 22:54:06

Bonjour Warkas,

Tu peux t'intéresser à l'effet fadeIn() par exemple de jQuery, ou slideUp().

Créer : voilà la grande délivrance de la souffrance, voilà ce qui rend la vie légère.

Comar91

31 octobre 2014 à 23:00:21

Bonsoir, il est possible aussi d'utiliser l'effet de transition css voir ici

Comar

Warkas

31 octobre 2014 à 23:43:46

Comar91 a écrit:

Bonsoir, il est possible aussi d'utiliser l'effet de transition css voir ici

J'ai bien mit une transition dans mon style css mais rien..

Tu aurais un code a m'envoyer pour réessayez ? Ma div est #info_js

mezannic

31 octobre 2014 à 23:56:03

Bonjour,

Je te conseille également les transitions CSS, plus performantes et sans doute plus propres (séparation de la logique (JS) et de la présentation (CSS)).

Exemple (ce code ne fonctionne que sur les navigateurs récents) : http://jsbin.com/qazeqaxemo/1/

HTML

<div id="container_player">player</div>
<div id="info_js">info</div>

var playerCtn = document.getElementById('container_player'),
    infoCtn = document.getElementById('info_js');

playerCtn.addEventListener('mouseenter', function() {
    infoCtn.classList.add('visible');
});
playerCtn.addEventListener('mouseleave', function() {
    infoCtn.classList.remove('visible');
});

CSS

#info_js {
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}

#info_js.visible {
    opacity: 1;
    visibility: visible;
}

Comar91

1 novembre 2014 à 0:06:24

mezannic a écrit:

Bonjour,

Je te conseille également les transitions CSS, plus performantes et sans doute plus propres (séparation de la logique (JS) et de la présentation (CSS)).

Tout est dit et un exemple donné. Ceci dit en allant sur le lien que j'ai fourni, il y a aussi des exemples.. :-°

Comar

Anonyme

1 novembre 2014 à 10:11:21

Bonjour.

Pourtant votre idée de départ n'était pas mauvaise !

Mais vous avez mélangé certaines choses !

- Au chargement de la page ("onload" sur le tag BODY) il faut un display="block" ; et sur le onmouseover un display="none".

- Et vous vous êtes planté sur le "id". C'est "container_player" qu'il faut prendre

Vous nétiez pas loin !

function AffichageInfo_load()
     {
     document.getElementById("container_player").style.display = "block";
     }
function AffichageInfo_Hide()
     {
     document.getElementById("container_player").style.display = "none";
     }

-
Edité par Anonyme 1 novembre 2014 à 11:53:41

Warkas

1 novembre 2014 à 11:43:05

g1loft a écrit:

Bonjour.

Pourant votre idée de départ n'était pas mauvaise !

Mais vous avez mélangé certaines choses !

- Au chargement de la page ("onload" sur le tag BODY) il faut un display="block"; et sur le onmouseover un display="none".

- Et vous vous êtes planté sur le "id". C'est "container_player" qu'il faut prendre

Vous nétiez pas loin !
function AffichageInfo_load()
     {
     document.getElementById("container_player").style.display = "block";
     }
function AffichageInfo_Hide()
     {
     document.getElementById("container_player").style.display = "none";
     }    

D'accord merci, je vais regarder tout ca.