Niet achterelkaar kunnen klikken.

Door Mathieu Posthumus op 03-03-2014 12:15 gewijzigd op 03-03-2014 12:30

1.558 views

Hallo,

Ik heb nou dit( http://mathieup.freeiz.com/index.php )

als je dan op het login knopje drukt dan wil ik dus ervoor zorgen dat de overlay dus wat opacity heeft wil ik late infaden en outfaden wanneer je wegklikt.

ik dacht eerst aan dit.


var docHeight = $(document).height()
$(document).ready(function(){
	$("a.login").click(function(){
		$(function() {
			$("body").fadeIn("<div id='overlay'></div>");
			$("#overlay")
			.height(docHeight)
			.css({
				'opacity' : 0.4,
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'background-color': 'black',
				'width': '100%',
				'z-index': 99
			});
		});
		$(".login_box").slideToggle("slow");
	});
		$("#container").mouseup(function (e){
			if (!$('.login_box').is(e.target) &&
				$('.login_box').has(e.target).length === 0)  {
					$('.login_box').slideUp("slow");
					$("#overlay").fadeOut("style");
				}
			});
});

Mich

03-03-2014 14:47 gewijzigd op 03-03-2014 14:47

Ja, je moet het zo zien. Als je een simpele toggle hebt wordt elke actie in een wachtrij gezet, dus als je 10x heel snel elkaar klikt, zal ie ze alle 10x in zijn geheel uitvoeren. Helemaal openen, helemaal sluiten.

Met stop() stop je de actie en voer je de actie daarna uit. 10x heel snel achterelkaar zal nog steeds 10x wordt uitgevoerd, maar alleen de laatste keer helemaal.

Ik heb een voorbeeldje gemaakt om het uit te proberen

Snelle Jaap

03-03-2014 14:52

Mathieu Posthumus op 03/03/2014 13:50:19

En wat ik vergeten ben op neer te zetten daar gaat de topic namelijk over xD

Das niet handig.

Mathieu Posthumus

03-03-2014 15:05

Jho snelle jaap pfff...

Denk ik yes een reactie daarvoor:D

Maar nee is het *Dat is niet handig*:|

Mich

03-03-2014 15:09

Ik gaf een reactie hoor ;) Gewoon stop() gebruiken dus. Zie de voorbeelden die ik intussen al heb gegeven.

Mathieu Posthumus

03-03-2014 15:12

Michael ja ik heb gebruik maar bij mij werkt ie niet goed. want bij mij als ik dan vaker klik dan gaat ie vervormen ofz.

Snelle Jaap

03-03-2014 15:16

Ik heb even gekeken op je site, nu werkt het toch gewoon zoals je in de 1e post aangaf?

Mathieu Posthumus

03-03-2014 15:26

Snelle Jaap op 03/03/2014 15:16:12

Ik heb even gekeken op je site, nu werkt het toch gewoon zoals je in de 1e post aangaf?

Nee want hij gaat niet in slow zegmaar daar gaat het om.

Snelle Jaap

03-03-2014 15:44

Een fadeout kan ook gewoon een ("slow") bevatten. Probeer dat anders is, want je wilt dat de overlay langzaam donkerder wordt toch? Ipv in 1 keer.

Toevoeging op 03/03/2014 16:12:27:

En wil je dat het tegelijk met de andere animatie wordt afgespeeld, dan gebruik je queue: false.

Mathieu Posthumus

03-03-2014 16:13 gewijzigd op 03-03-2014 16:13

ja dat wil ik idd maar als ik het verander naar fadeIn en fadeOut dan gaat ie niet dan doet ie dit http://jsbin.com/lubipipa/5/edit

Dit is mijn .js code


var docHeight = $(document).height()
$(document).ready(function(){
	$("a.login").click(function(){
		$(function() {
			$("body").fadeIn("<div id='overlay'></div>");
			$("#overlay")
			.height(docHeight)
			.css({
				'opacity' : 0.4,
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'background-color': 'black',
				'width': '100%',
				'z-index': 99
			});
		});
		$(".login_box").slideToggle("slow");
	});
		$("#container").mouseup(function (e){
			if (!$('.login_box').is(e.target) &&
				$('.login_box').has(e.target).length === 0)  {
					$('.login_box').slideUp("slow");
					$("#overlay").fadeOut("style");
				}
			});
});

Mich

03-03-2014 16:14

fadeOut("style") kan niet. Dat zei ik al eerder.

Reageren

Inloggen om te reageren