Jquery .click

Een hover event heeft inderdaad 2 functies: onMouseOver en onMouseOut. Een click event heeft maar 1 functie: onClick. Zo werkt het in JavaScript, dus zo werkt het ook in jQuery.
Wat jij wilt is een toggle functie, in jQuery zitten er standaard een paar ingebouwd: toggle(), slideToggle() en fadeToggle().
Zoiets is er niet voor opacity, dus die zal je zelf moeten maken:

function opacityToggle(var id)
{
  if(id.css('opacity') == 1)
  {
    id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
  }
  else
  {
    id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
  }
}

Nu wordt de code:

$('#box').click(function() {
  opacityToggle($('#anotherBox'));
});

Let wel er op dat je verschil maakt in JavaScript (en andere scripttalen) tussen strings, intergers en booleans:

var mijnString = 'Tekst tussen quotes';
var mijnInterger = 4; //Cijfer zonder quotes
var mijnBoolean = true; //true of false

Bedankt voor je reactie!
Ik snap het alleen nog niet helemaal.

De opacityToggle die je hebt aangemaakt is puur de functie die je in het stukje JQuery gebruikt, of moet dit nog ergens aan gekoppeld worden?
De id.css en id.animate is voor mij nog niet helemaal duidelijk. Ik had ook al gegoogled maar kwam er niet echt uit.

Ik heb het nu zo:

[CODE]
<script>
function opacityToggle(var id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
}
else
{
id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
}
}


$('#button').click(function() {
opacityToggle($('.boxes'));
});
</script>

Ik zal het wel even uitleggen.

We maken nu een functie aan. Dit is gewoon een zelfgemaakte functie. Die functie noemen we opacityToggle:

function opacityToggle()

Nu kunnen we parameters meegeven aan de functie. Omdat we niet weten welke elementen we aanspreken zetten we dat als parameter in de functie. Ik had gezegd var id, maar dit moet alleen maar id zijn. Nu hebben we in deze variabele dus het element die we moeten gaan veranderen. Even een voorbeeld om het beter uit te leggen:

$('#box').hide()

We zien hier dat we een element met het id box aanspreken en we gaan deze verbergen. $('#box') is in gewoon JavaScript:

document.getElementById('box');

Maar stel nou dat we die id variabel willen maken? Dan kunnen we 2 dingen doen:

var id = '#box';
$(id).hide();

Wat hier gebeurd is dat we een naam in de variabele id stoppen en die plaatsen we op de plaats waar je het element aanspreekt. De andere methode (die ik beter vind) is om het zo te doen:

var id = $('#box');
id.hide();

Je ziet dat we nu het gebied $('#box') in een variabele hebben gezet en we die variabele nu gewoon aanroepen en er de functie hide() aan toevoegen. id wordt dus gewoon vervangen door de value van de variabele id.

Met if(id.css('opacity') == 1) roepen we dus eigenlijk de value van de parameter id aan. We kijken of de opacity 1 is, zo ja dan moet hij 0.05 worden. Zo niet, dan moeten we hem 1 maken.

Als we nu deze functie aanroepen moeten we dus gaan werken met $():

opacityToggle($('#box'));

Nu vullen we var id van de functie dus met $('#box') dus nu zal de functie i.p.v. id elke keer $('#box') zetten.

Bedankt voor de tijd die je neemt om het mij uit te leggen. Ik ben al een stuk wijzer geworden, echter kom ik er nog niet volledig uit. Volgens mij ben ik er bijna.


Dit is de functie die ik heb aangemaakt om de opacity van een div te veranderen.

		
				function opacityToggle(id)
					{
					  if(id.css('opacity') == 1)
					  {
						id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
					  }
					  else
					  {
						id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
					  }
					} 

Ik geef een variabele id om aan te geven om welke div het gaat. Variabele id = $('#box2');
Overal waar dus id staat wordt vervangen door dit.

var id = $('#box2');

Dan heb ik de jquery code om aan te geven dat als je op #box1 klikt, de functie die net is aangemaakt (opacityToggle) uit te voeren op #box2. #box2 hoort dus van opacity te veranderen als je op de #box1 klikt.

$('#box1').click(function() {
		opacityToggle($('#box2'));
		}); 

Volgens mij gaat het nog ergens verkeerd?

Nogmaals alvast bedankt,

Haal die queue eens weg, want bij mij werkte deze code wel gewoon:

function opacityToggle(id)
{
  if(id.css('opacity') == 1)
  {
    id.animate({'opacity': .5}, 500);
  }
  else 
  {
    id.animate({'opacity': 1}, 500);
  }
}

Bij mij werkt die niet.

Mijn code is nu als volgt:

<script>
		
		
				function opacityToggle(id)
					{
					  if(id.css('opacity') == 1)
					  {
						id.animate({'opacity': 0.05}, 500);
					  }
					  else
					  {
						id.animate({'opacity': 1}, 500});
					  }
					} 
					
					var id = $('#box2');
		
		$('#box1').click(function() {
		opacityToggle($('#box2'));
		}); 
		
	</script>

Op regel 12 na 500 staat een } teveel, even debuggen is altijd handig...

Bedankt! het werkt nu.

Hij doet alleen nog niet precies wat ik wil. Als je op rood klikt worden de blauwe vlakken doorzichtig. Maar als je dan op roze klikt, blijven de blauwe vlakken doorzichtig.

Het komt er op neer dat als je eenmaal op rood klikt, de blauwe vlakken doorzichtig worden, maar als je dan ergens anders op klikt, maakt niet uit waar op, de blauwe vlakken weer helder moeten worden.

Hier is het voorbeeld met de vlakken: http://www.wndworks.nl/click/

Ik weet niet of dit mogelijk is? Ik wil je in elk geval alvast bedanken voor je hulp!

Hier is alle code bij de voorbeeldsite:

<html>
<head>

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>


<style>

	html, body {
	background: #131313;
	margin: 0;
	}

	#box1 {
	height: 50px;
	width: 50px;
	background: red;
	margin: 20px;
	}
	
	#box3 {
	height: 50px;
	width: 50px;
	background: pink;
	margin: 20px;
	}
	
	.box2 {
	height: 150px;
	width: 150px;
	background: blue;
	margin: 20px;
	float: left;
	}
	
	.box4 {
	height: 150px;
	width: 150px;
	background: purple;
	margin: 20px;
	float: left;
	}
	
</style>

	<script type="text/javascript">
		
		function opacityToggle(id)
					{
					  if(id.css('opacity') == 1)
					  {
						id.animate({'opacity': 0.05}, 500);
					  }
					  else
					  {
						id.animate({'opacity': 1}, 500);
					  }
					} 
					
					var id = $('.box2');
		
		$(function() {
		
		$('#box1').click(function() {
		opacityToggle($('.box2'));
		}); 
		
		$('#box3').click(function() {
		opacityToggle($('.box4'));
		}); 
		
		}); 
		
	</script>

</head>
<body>


<div id="box1"></div>
<div id="box3"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box4"></div>
<div class="box4"></div>

</body>
</html>

Dat kan ook. Je hoeft dan niks te veranderen in de functie, maar wel in de click methodes.
Je kan het best 2 variabele aanmaken: Green en Blue (in mijn voorbeeld werk ik met groen en blauw). Je zet ze allebij op false. Nu geef je als er op de button voor blauw geklikt wordt blue true mee. En als er op groen geklikt wordt geef je green true mee. Met een simpele if statement kan je dan de opacity togglen. Mijn voorbeeldje:
http://waldio.webatu.com/jquery/opacityToggle.html
Zoals je ziet werk ik hier met een plugin style, maar de originele functie staat er ook in (in de comments).

Heel erg bedankt voor je hulp! het werkt!

Ik was nog even aan het experimenteren om het helemaal te snappen, door een derde div toe te voegen. Kijken hoe dat dan werkt. Maar het gaat niet zo als ik dacht.

Ik had de onderstaande code geprobeerd, maar waarschijnlijk gaat het mis in de if statement. Of is het helemaal niet mogelijk op de manier zoals ik het probeer?

var boxblue = false,
					boxred = false,
					boxgreen = false;
					
				$('#togglered').click(function() {
					$('.boxred').opacityToggle();
					if(boxblue, boxgreen == true) {
						$('.boxblue,.boxgreen').opacityToggle();
					}
					boxred = true;
					boxblue = false;
					boxgreen = false;
				});
				$('#toggleblue').click(function() {
					$('.boxblue').opacityToggle();
					if(boxred, boxgreen == true) {
						$('.boxred,.boxgreen').opacityToggle();
					}
					boxblue = true;
					boxred = false;
					boxgreen = false;
				});
				$('#togglegreen').click(function() {
					$('.boxgreen').opacityToggle();
					if(boxred, boxblue == true) {
						$('.boxred,.boxblue').opacityToggle();
					}
					boxgreen = true;
					boxred = false;
					boxblue = false;
				});