Niet achterelkaar kunnen klikken.
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).
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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");
}
});
});
$(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
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.
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
Oke
Michael ik heb hete egt geprobeerd maar waar ik het neerzet doet ie het niet goed waar moet ik het dan neer zetten?
De code die micheal gaf moet je neerzetten bij je andere jQuery code.
Duidelijk :?
Wat je nodig hebt ik fadeTo()
$("#overlay").fadeTo("slow", 0.5 )
En die css opacity regel kan dan weg.
In die mouseup function zou je dan weer $("#overlay").fadeOut("slow"); moeten gebruiken (removeAttr('style') is niet perse meer nodig)
Alleen die mouseup function werkt niet goed. Ben er even naar aan het kijken.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var docHeight = $(document).height();
$(document).ready(function(){
$("a.login").click(function(){
$("#overlay")
.fadeTo("slow", 0.5 )
.height(docHeight)
.css({
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 99
});
$(".login_box").slideDown("slow");
});
$("#overlay").click(function(){
$('.login_box').slideUp("slow");
$("#overlay").fadeOut("slow");
});
});
$(document).ready(function(){
$("a.login").click(function(){
$("#overlay")
.fadeTo("slow", 0.5 )
.height(docHeight)
.css({
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 99
});
$(".login_box").slideDown("slow");
});
$("#overlay").click(function(){
$('.login_box').slideUp("slow");
$("#overlay").fadeOut("slow");
});
});
edit: Opgelost door van document (jij had hier #container van gemaakt?) #overlay van te maken. Anders werd die code al uitgevoerd terwijl je op de link klikt. (Bovenstaande code aangepast)
fiddle
Kun je hiermee verder?
Edit: mouseup heeft nou weinig zin meer, dus deze kan er wel weer uit (aangepast in bovenstaande code).
Gewijzigd op 05/03/2014 14:31:22 door Michael -
Ja hij werkt super bedankt!
Toevoeging op 05/03/2014 14:32:50:
De mouseup functie heeft trouwens geen nut meer, dus die heb ik er nog even uitgehaald. Ook zat er een nutteloze functie in na de click functie. Aangepast in bovenstaande code.
Graag gedaan.