Ik heb een tijdje terug een topic geopend over een click functie vraag. Hier ben ik een heel eind mee verder gekomen, maar ben er nog niet volledig uit. Omdat het oude topic al weer een beetje afwijkt van mij huidige vraag open ik bij deze een nieuwe.
Ik heb een toggle functie gemaakt in jquery, die objecten van opacity veranderd.
De bedoeling is dat als je op een kleur in de kleine kleuren vlakjes klikt, de overige grote kleurvlakken doorzichtig worden. Dus als je op rood klikt, word het grote groene en blauwe vlak doorzichtig.
Zie: Hier
Het probleem is, dat als je er een beetje doorheen klikt, het niet doet wat het hoort te doen. In het begin gaat het soepel, maar als je doorklikt worden alle grote vlakken doorzichtig of juist niet en dergelijke.
Jquery:
$(function() {
$.fn.opacityToggle = function() {
var id = $(this);
if (id.css('opacity') == 1) {
id.animate({
'opacity': .5
}, 500);
}
else {
id.animate({
'opacity': 1
}, 500);
}
};
var boxblue = false,
boxred = false,
boxgreen = false;
$('#togglered').click(function() {
$('.boxgreen, .boxblue').opacityToggle();
if(boxred === true) {
$('.boxred').opacityToggle();
}
boxred = false;
boxblue = true;
boxgreen = true;
});
$('#toggleblue').click(function() {
$('.boxgreen, .boxred').opacityToggle();
if(boxblue === true) {
$('.boxblue').opacityToggle();
}
boxblue = false;
boxred = true;
boxgreen = true;
});
$('#togglegreen').click(function() {
$('.boxblue, .boxred').opacityToggle();
if(boxgreen === true) {
$('.boxgreen').opacityToggle();
}
boxgreen = false;
boxred = true;
boxblue = true;
});
});
Voor de css en html codes kun je in de broncode kijken van het voorbeeld.
Ik hoop dat iemand ziet wat het probleem is.
Alvast bedankt,
