Niet achterelkaar kunnen klikken.
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.
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("<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");
}
});
});
$(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");
}
});
});
Topic verplaatst naar de "JavaScript" categorie, aangezien het een jQuery vraag betreft.[/modedit]
Gewijzigd op 03/03/2014 12:30:48 door Wouter J
De overlay? Je bedoelt de achtergrond van de website? En het login knopje is dat poppetje zeker?
Toevoeging op 03/03/2014 13:35:50:
$("#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.
Waaronder de informatie wordt weergeven bedoel je? Anders heeft de transparantie toch geen zin, als er elementen boven staan.
lightbox waarneer je op een foto klikt.
Om het script van Mathieu als voorbeeld te nemen, zal het scherm om in te loggen boven de overlay worden weergegeven en de rest eronder. Zoiets als Ah zo bedoel je, ik snap hem.
Snelle Jaap op 03/03/2014 13:19:09:
De overlay? Je bedoelt de achtergrond van de website? En het login knopje is dat poppetje zeker?
ja dat is hem
Toevoeging op 03/03/2014 13:54:56:
En wat ik vergeten ben op neer te zetten daar gaat de topic namelijk over xD
Dat als je dus op de knop drukt dat je de overlay en box tevoorschijn krijg en dat als je dan op de overlay klikt dat het weg gaat maar dat als je heel vaak op de login knop drukt dat het dan niet zovaak opnieuw gaat.
want ik zou niet eens weten wat ik daarvoor op moet zoeken.
Zie ook aangepast voorbeeld. Helemaal voorkomen kun je het niet.
http://wonen.nl daar wel
Nou ja als je kijkt op Dat lijkt inderdaad op de stop() functie
maar wat je nu hebt is als je er vaker op klikt dat ie klein wordt ofz.... vet raar.
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
Gewijzigd op 03/03/2014 14:47:49 door Michael -
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.
Denk ik yes een reactie daarvoor:D
Maar nee is het *Dat is niet handig*:|
Ik gaf een reactie hoor ;) Gewoon stop() gebruiken dus. Zie de voorbeelden die ik intussen al heb gegeven.
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.
Ik heb even gekeken op je site, nu werkt het toch gewoon zoals je in de 1e post aangaf?
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.
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.
http://jsbin.com/lubipipa/5/edit
Dit is mijn .js code
ja dat wil ik idd maar als ik het verander naar fadeIn en fadeOut dan gaat ie niet dan doet ie dit Dit is mijn .js code
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("<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");
}
});
});
$(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");
}
});
});
Gewijzigd op 03/03/2014 16:13:45 door Mathieu Posthumus
fadeOut("style") kan niet. Dat zei ik al eerder.