Discussion :

[kevinf]

Salut,

j'ai ce code pour faire apparaitre/disparraitre une div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script language="javascript">
function hideShow(id_div)
    {
    var img = "image";
    img += id_div ;
    if (document.getElementById(id_div).style.display=='block')
        {
        document.getElementById(id_div).style.display='none'
        document.getElementById(img).src='down.png'
        }
    else
        {
        document.getElementById(id_div).style.display='block'
        document.getElementById(img).src='up.png'
        }    
    }
</script>
 
<a href="#"><img src="down.png" name="image1" border="0" id="image1" onClick="hideShow(1)"></a>
<div id="1" style="display:none ">
contenu
</div>

Ce code faire donc apparaitre/disparraitre "tout d'un coup", comment faire pour que ca fasse comme en cliquand sur le croix à côté de la publicité a droite là : http://www.dailymotion.com/fr/cluste...coup-de-mother

Merci de votre aide

[muad'dib]

Je n'ai aucune pub à droite.

[cerede2000]

Moi non plus, enfin j'ai AdBlock aussi :S

[Shinuza]

Pour redéfinir le style par défaut d'un élément via l'object style, on utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

element.style.my_property = '';

De plus ton getter (la valeur retournée par element.style.my_property) par défaut est vide

Donc ta fonction ne marchera jamais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function $(el) {
	return document.getElementById(el);
}
 
function toggle(id_div) {
		var img = $("image"+id_div),
			div = $(id_div),
			hide = function() {;div.style.display='none';img.src='down.png'},
			show = function() {div.style.display='';img.src='up.png'};
			(div.style.display == '') ? hide() : show(); 
}
</script>

Accesoirement, le mieux est de passer par des classes pour cacher et afficher tes éléments, en ajoutant une classe qui applique le display:none

[kevinf]

Le code que je vous ai donné marche très bien. Je voulais juste que la disparition se fasse progressive comme l'apparition.

[SpaceFrog]

marche pas chez moi ...

mais bon je suppose qu'il doit s'agir d'un setInterval qui modifie l'opacité ...
une petite recherche sur le forum te donnera les code crossbrowser pour l'opacité (parceque là il à pas l'air crossbrowser) j'en ai parlé il n'y a pas très longtemps ...

[Shinuza]

Le code que je vous ai donné marche très bien. Je voulais juste que la disparition se fasse progressive comme l'apparition.

Marche pas leur truc

Essaye bytefx avec cette fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
	function toggle(id_div) {
			var img = $("image"+id_div),
				div = $(id_div),
				hide = function() {bytefx.fade(div , 100, 0, 2, function(){this.style.display='none'});img.src='down.png'},
				show = function() {div.style.display='';bytefx.fade(div , 0, 100, 2, function(){});img.src='up.png'};
				(div.style.display == '') ? hide() : show(); 
}

Ca devrait marcher
Edit : La version "packer"

marche pas chez moi ...

mais bon je suppose qu'il doit s'agir d'un setInterval qui modifie l'opacité ...
une petite recherche sur le forum te donnera les code crossbrowser pour l'opacité (parceque là il à pas l'air crossbrowser) j'en ai parlé il n'y a pas très longtemps ...

Non, setInterval est beaucoup trop lent pour ce genre d'effet.