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");
				}
			});
});


fadeOut heeft 3 properties die kunnen worden toegepast, speed, easing en callback. Jij hebt speed nodig. Verander .fadeOut("style") is naar .fadeout("slow") (je kan ook milliseconden toevoegen gebruiken).
Michael waar je dat hebt geezegt weet ik ook niet maar graag waar heb je het gezegt dan?


Toevoeging op 03/03/2014 16:28:13:

Snelle Jaap op 03/03/2014 16:22:54

fadeOut heeft 3 properties die kunnen worden toegepast, speed, easing en callback. Jij hebt speed nodig. Verander .fadeOut("style") is naar .fadeout("slow") (je kan ook milliseconden toevoegen gebruiken).


Maar waar moet ik dat nu neerplaatsen dan? want ik deed het zo?


var docHeight = $(document).height()
$(document).ready(function(){
	$("a.login").click(function(){
		$(function() {
			$("body").fadeIn("slow").append("<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("slow").removeAttr("style");
				}
			});
});
Ja dat zou moeten werken, kijk anders of er misschien iets fout zit in je if.
1 Tip: Werk met POST, niet met GET. Het wachtwoord wordt anders zichtbaar in de URL.
Peter Flos op 04/03/2014 22:10:27

1 Tip: Werk met POST, niet met GET. Het wachtwoord wordt anders zichtbaar in de URL.


Ik weet niet waar je het over hebt maar ik heb nergens GET gebruikt

Toevoeging op 05/03/2014 09:47:56:

Snelle Jaap op 04/03/2014 11:45:54

Ja dat zou moeten werken, kijk anders of er misschien iets fout zit in je if.


Ik heb het zowat overal geprobeerd maar werkt nergens met .stop() ertussen
>> Michael waar je dat hebt geezegt weet ik ook niet maar graag waar heb je het gezegt dan?

toevoeging in de 2 reactie

Michael - op 03/03/2014 13:31:56

$("#overlay").fadeOut("style");

De functie RemoveAttr is er juist voor bedoelt om 'style' te verwijderen (dus de opmaak/css). Je kunt deze niet vervangen door fadeOut.
$("#overlay").fadeOut("slow"); zou misschien wel werken, maar de style blijft dan wel staan.
Het is handig om in de documentatie van jQuery de functies te bekijken, wat ze nou eigenlijk doen, voordat je ze aanpast.


Stop() doet wel wat je bedoelt, maar misschien dat je zelf niet snapt wat stop doet? Hiervoor had ik eerder een voorbeeld gemaakt met een toggle en een toggle icm stop.
Nog een keer, de bedoeling is toch dat je klikt op de knop, waarna de achtergrond langzaam verkleurt (donkerder wordt)?
Snelle Jaap op 05/03/2014 10:46:24

Nog een keer, de bedoeling is toch dat je klikt op de knop, waarna de achtergrond langzaam verkleurt (donkerder wordt)?


Ja idd en dan ook als je het weg klikt dat het fadeOut
Michael ik heb hete egt geprobeerd maar waar ik het neerzet doet ie het niet goed waar moet ik het dan neer zetten?

Reageren