11548 sujets

JavaScript, DOM et API Web HTML5

.click activer une opacity ?

Bonjour,

Tout d'abord, je vous préviens, je suis complètement débutant en js/jquery, la c'est mon "vrai" premier code jquery de 0.

Voila pour le moment ce que j'ai:


$(".div1").click(function () {
    	 	$(this).animate({"opacity": 1});
    	 	$(".div2")..animate({"opacity": 0.5});
    	 	$(".div3").animate({"opacity": 0.5});
    	 	$(".div4").animate({"opacity": 0.5});
 });
$(".div2").click(function () {
    	 	$(this).animate({"opacity": 1});
    	 	$(".div1")..animate({"opacity": 0.5});
    	 	$(".div3").animate({"opacity": 0.5});
    	 	$(".div4").animate({"opacity": 0.5});
 });
$(".div3").click(function () {
    	 	$(this).animate({"opacity": 1});
    	 	$(".div2")..animate({"opacity": 0.5});
    	 	$(".div1").animate({"opacity": 0.5});
    	 	$(".div4").animate({"opacity": 0.5});
 });
$(".div4").click(function () {
    	 	$(this).animate({"opacity": 1});
    	 	$(".div2")..animate({"opacity": 0.5});
    	 	$(".div3").animate({"opacity": 0.5});
    	 	$(".div1").animate({"opacity": 0.5});
 });


Voila, en gros, je voudrais que lorsque l'utilisateur click sur la div, l'opacity passe a 1.
Pour le moment il passe a 1 lors d'un hover que j'ai fait, mais je n'arrive pas a trouver comment faire pour que cela s'active au click de la div et se desactive sur l'autre.

Merci d'avance pour toute pistes !
Bonjour egosentriik,

voici une solution à ton problème en Javascript ! Je te laisse faire l'adaptation en Jquery.

voici la déclaration en CSS :
#un {
		background-color	: lightyellow;
		margin			: 10px;
		padding			: 5px 15px;
		width			: 200px;
		opacity			: 0.3;
		filter			: alpha(opacity=30);
}

#deux {
		background-color	: lightpink;
		margin			: 10px;
		padding			: 5px 15px;
		width			: 200px;
		opacity			: 0.3;
		filter			: alpha(opacity=30);
}

#trois {
		background-color	: lightgreen;
		margin			: 10px;
		padding			: 5px 15px;
		width			: 200px;
		opacity			: 1;
		filter			: alpha(opacity=100);
}

#quatre {
		background-color	: lightblue;
		margin			: 10px;
		padding			: 5px 15px;
		width			: 200px;
		opacity			: 0.3;
		filter			: alpha(opacity=30);
}


Voici la déclaration en Javascript :
window.onload = init;

function change(id , val)
{
	if (document.all)
		document.getElementById(id).style.filter = "alpha(opacity=" + (val*100) + ")";
	else	document.getElementById(id).style.opacity = val;
}


function init()
{
	document.getElementById("un").onclick = function ()
	{
		change("un",     "1");
		change("deux",   "0.3");
		change("trois",  "0.3");
		change("quatre", "0.3");
	};

	document.getElementById("deux").onclick = function ()
	{
		change("un",     "0.3");
		change("deux",   "1");
		change("trois",  "0.3");
		change("quatre", "0.3");
	};

	document.getElementById("trois").onclick = function ()
	{
		change("un",     "0.3");
		change("deux",   "0.3");
		change("trois",  "1");
		change("quatre", "0.3");
	};

	document.getElementById("quatre").onclick = function ()
	{
		change("un",     "0.3");
		change("deux",   "0.3");
		change("trois",  "0.3");
		change("quatre", "1");
	};
}


@+
Modifié par Artemus24 (29 Apr 2012 - 16:24)
Sujet clos
Aller à