Esecuzione funzioni al trigger

[doppiaM]

Buongiorno a tutti,
avrei bisogno di un aiuto per uno script, in questo caso che metto qua sotto avrei bisogno che quando il mouse entra in un trigger esegue la funzione add addclassin, se in seguito con il mouse entro su un altro trigger mi viene aggiunto addclassin sul trigger in qui sono entrato e addclassout al trigger precedente.

Non voglio usare mouseleave perch� se non entro in un altro trigger non voglio che venga aggiunto addclassout

in sostanza questo � un menu che se passo sulle voci mi attiva tramite aggiunte di class e CSS un animazione di entrata e una di uscita e io voglio che quella di uscita venga attivata solo quando dopo essere stato su un trigger sono entrato in un altro diverso

var threshold = 60; // La soglia di scroll
var delay = 2000; // Ritardo in millisecondi
var scrollTimeout; // Dichiarazione globale per gestire il timeout dello scroll
var maskmain = document.getElementById("mainmask");
var sonotriggerato = false;


function addHoverListenersWithDelay(triggerId, maskId, lineId) {


var trigger = document.getElementById(triggerId);
var mask = document.getElementById(maskId);
var line = document.getElementById(lineId);
var prevTrigger;



function addclassin () {
mask.classList.add("fadein");
maskmain.classList.add("hovered");
line.classList.add("hovered");
} //mi aggiunge un entrata alle maschere



function addclassout () {
mask.classList.add("fadeout");
mask.classList.remove("fadein");
maskmain.classList.remove("hovered");
line.classList.remove("hovered");
setTimeout(function (){
mask.classList.remove("fadeout");
}, 400);
}//mi aggiunge un uscita alle maschere e poi si rimuove da solo



trigger.addEventListener("mouseenter", function () {


var scrollPosition = window.scrollY || window.pageYOffset;

if (prevTrigger != trigger) { // Se c'� un trigger precedente, applica addclassout
addclassout(prevTrigger);


}



if (scrollPosition < threshold && sonotriggerato === false) {

//questo mi serve per aggiungere un delay sora una soglia di scroll


clearTimeout(scrollTimeout);


scrollTimeout = setTimeout(function () {


addclassin();
sonotriggerato = true;
}, delay);


} else {

addclassin();
}
prevTrigger = triggerId;
});


}





}


//queste sono le chiamate del trigger, maschera, linea


addHoverListenersWithDelay("ch1", "ch2", "ch3");
addHoverListenersWithDelay("sr1", "sr2", "sr3");
addHoverListenersWithDelay("pr1", "pr2", "pr3");
addHoverListenersWithDelay("me1", "me2", "me3");
addHoverListenersWithDelay("ca1", "ca2", "ca3");
addHoverListenersWithDelay("in1", "in2", "in3");
addHoverListenersWithDelay("con1", "con2", "con3");
addHoverListenersWithDelay("cor1", "cor2", "cor3");

[KillerWorm]

Ciao e benarrivato, non è molto chiaro come funziona lo script che hai postato; sarebbe utile che tu fornissi un esempio minimo in cui è possibile riscontrare il problema, ad esempio usando uno dei vari code playground online.

Ad ogni modo, vedo che la variabile prevTrigger è definita localmente dentro la funzione addHoverListenersWithDelay.
Dal momento che usi questa per determinare l'eventuale "trigger" precedentemente avvenuto, sarebbe più logico che fosse definita nel livello principale. In sostanza quella variabile dovrebbe essere globale e non locale.

Vedi se risolvi in questo modo, altrimenti ti invito a fornire un esempio minimo.

[doppiaM]

intendi tipo codepen?

[doppiaM]

Ciao e benarrivato, non è molto chiaro come funziona lo script che hai postato; sarebbe utile che tu fornissi un esempio minimo in cui è possibile riscontrare il problema, ad esempio usando uno dei vari code playground online.

Ad ogni modo, vedo che la variabile prevTrigger è definita localmente dentro la funzione addHoverListenersWithDelay.
Dal momento che usi questa per determinare l'eventuale "trigger" precedentemente avvenuto, sarebbe più logico che fosse definita nel livello principale. In sostanza quella variabile dovrebbe essere globale e non locale.

Vedi se risolvi in questo modo, altrimenti ti invito a fornire un esempio minimo.

non funziona purtroppo

https://codepen.io/doppiaMM/pen/yLwVVKx

qui c'è il link di code Pen è un pò sminchiata la formattazione ma fa nulla l'importante per me è la questione del mouseenter che attiva addclassin al primo trigger che incontra se passo su un altro trigger attiva addclassin al nuovo e a quello precedente assegna addclassout.

se vedete le maschere tramite l'ispeziona che sono gli elementi con id ch2, sr2, ecc... noterete che entrando su un trigger parte addclassin se passate su un altro trigger non aggiunge addclassout su quello precedente ma sullo stesso trigger su cui entrerete attiva sia addclassout che addclassin.

spero si capisca e che possiate aiutarmi grazie a tutti

[KillerWorm]

bene, ho visto. Gli do uno sguardo più attento e se riesco ti aggiorno più tardi.

[doppiaM]

bene, ho visto. Gli do uno sguardo più attento e se riesco ti aggiorno più tardi.

Grazie mille

[KillerWorm]

Ci sono alcuni punti che non tornano nella logica che hai usato.
Andiamo per ordine.

1 - Prima di tutto, come già ti ho indicato, va spostata la variabile prevTrigger fuori dalla funzione addHoverListenersWithDelay per definirla invece nel livello principale.

2 - Anche Le funzioni addclassin e addclassout puoi spostarle fuori dalla funzione addHoverListenersWithDelay, così da evitare ridondanze e spreco di risorse durante l'esecuzione stessa dello script. Infatti non serve che tali funzioni siano create localmente, e quindi definite nuovamente per ogni chiamata della funzione addHoverListenersWithDelay. Basta invece che siano definite una sola volta nel livello principale e magari organizzate in modo che i relativi elementi, su cui agiscono, siano passati come argomenti.
3 - Dentro la gestione dell'evento mouseenter vai a chiamare addclassout passando un argomento in questo modo:

addclassout(prevTrigger);

Ma nella definizione della funzione non hai previsto alcun argomento:

function addclassout () {...}

Come pensi di passare prevTrigger a questa funzione?

4 - In qualunque caso, anche se tu definissi opportunamente quell'argomento per ricevere quell'elemento, non vedo come lo hai utilizzato dentro la funzione. Vedi invece che vai ad agire su due elementi in particolare:
function addclassout() {
mask.classList.add("fadeout");
mask.classList.remove("fadein");
maskmain.classList.remove("hovered");
line.classList.remove("hovered");
setTimeout(function () {
mask.classList.remove("fadeout");
}, 400);
}
Gli elementi mask e line sono quelli relativi al presunto prevTrigger che dovrebbero essere passati in modo parametrico a questa funzione; diversamente come pensi che possa funzionare?

Ciò che potresti fare è passare un oggetto che contenga questi due elementi, quindi impostare la funzione in questo modo:

function addclassout(el) {
  el.mask.classList.add("fadeout");
  el.mask.classList.remove("fadein");
  maskmain.classList.remove("hovered");
  el.line.classList.remove("hovered");
  setTimeout(function () {
    el.mask.classList.remove("fadeout");
  }, 400);
}

Ora la funzione ha un argomento. Questo è un oggetto che deve contenere le due proprietà (mask e line). Sotto vediamo come definire questo oggetto per passarlo alla funzione.

5 - Direi che anche la funzione addclassin può essere impostata allo stesso modo:

function addclassin(el) {
  el.mask.classList.add("fadein");
  maskmain.classList.add("hovered");
  el.line.classList.add("hovered");
}

Quando chiami queste funzioni dovrai quindi passargli un oggetto che contenga quei due elementi:

addclassin({mask, line});
...
addclassout({mask, line});

6 - Dentro mouseenter , dopo aver eseguito il tutto, dovrai popolare la variabile prevTrigger in questo modo:

prevTrigger = {mask, line};

per cui potrai richiamare la funzione addclassout in questo modo:

addclassout(prevTrigger);

7 - Hai infatti questa condizione:

if (prevTrigger != trigger) {  // Se c'è un trigger precedente, applica addclassout
  addclassout(prevTrigger);
}

ma non è sufficiente per controllare se effettivamente ci sia un trigger precedente. Infatti prevTrigger inizialmente è null, per cui è, sì, diverso da trigger, ma ancora non esiste, quindi verrebbe generato un errore quando la funzione addclassout è richiamata passando quell'argomento nullo.

Dovrai quindi verificare anche se prevTrigger esiste. Puoi fare così:

if (prevTrigger && prevTrigger != trigger) {
  // Se c'è un trigger precedente, applica addclassout
  addclassout(prevTrigger);
}

---

Non voglio postare la minestra pronta ma ti invito intanto a provare ad apportare le modifiche come ho indicato.
Fai sapere e se trovi difficoltà cerchiamo di capire come procedere.

[doppiaM]

Ci sono alcuni punti che non tornano nella logica che hai usato.
Andiamo per ordine.

1 - Prima di tutto, come già ti ho indicato, va spostata la variabile prevTrigger fuori dalla funzione addHoverListenersWithDelay per definirla invece nel livello principale.

2 - Anche Le funzioni addclassin e addclassout puoi spostarle fuori dalla funzione addHoverListenersWithDelay, così da evitare ridondanze e spreco di risorse durante l'esecuzione stessa dello script. Infatti non serve che tali funzioni siano create localmente, e quindi definite nuovamente per ogni chiamata della funzione addHoverListenersWithDelay. Basta invece che siano definite una sola volta nel livello principale e magari organizzate in modo che i relativi elementi, su cui agiscono, siano passati come argomenti.
3 - Dentro la gestione dell'evento mouseenter vai a chiamare addclassout passando un argomento in questo modo:

addclassout(prevTrigger);

Ma nella definizione della funzione non hai previsto alcun argomento:

function addclassout () {...}

Come pensi di passare prevTrigger a questa funzione?

4 - In qualunque caso, anche se tu definissi opportunamente quell'argomento per ricevere quell'elemento, non vedo come lo hai utilizzato dentro la funzione. Vedi invece che vai ad agire su due elementi in particolare:
function addclassout() {
mask.classList.add("fadeout");
mask.classList.remove("fadein");
maskmain.classList.remove("hovered");
line.classList.remove("hovered");
setTimeout(function () {
mask.classList.remove("fadeout");
}, 400);
}
Gli elementi mask e line sono quelli relativi al presunto prevTrigger che dovrebbero essere passati in modo parametrico a questa funzione; diversamente come pensi che possa funzionare?

Ciò che potresti fare è passare un oggetto che contenga questi due elementi, quindi impostare la funzione in questo modo:

function addclassout(el) {
  el.mask.classList.add("fadeout");
  el.mask.classList.remove("fadein");
  maskmain.classList.remove("hovered");
  el.line.classList.remove("hovered");
  setTimeout(function () {
    el.mask.classList.remove("fadeout");
  }, 400);
}

Ora la funzione ha un argomento. Questo è un oggetto che deve contenere le due proprietà (mask e line). Sotto vediamo come definire questo oggetto per passarlo alla funzione.

5 - Direi che anche la funzione addclassin può essere impostata allo stesso modo:

function addclassin(el) {
  el.mask.classList.add("fadein");
  maskmain.classList.add("hovered");
  el.line.classList.add("hovered");
}

Quando chiami queste funzioni dovrai quindi passargli un oggetto che contenga quei due elementi:

addclassin({mask, line});
...
addclassout({mask, line});

6 - Dentro mouseenter , dopo aver eseguito il tutto, dovrai popolare la variabile prevTrigger in questo modo:

prevTrigger = {mask, line};

per cui potrai richiamare la funzione addclassout in questo modo:

addclassout(prevTrigger);

7 - Hai infatti questa condizione:

if (prevTrigger != trigger) {  // Se c'è un trigger precedente, applica addclassout
  addclassout(prevTrigger);
}

ma non è sufficiente per controllare se effettivamente ci sia un trigger precedente. Infatti prevTrigger inizialmente è null, per cui è, sì, diverso da trigger, ma ancora non esiste, quindi verrebbe generato un errore quando la funzione addclassout è richiamata passando quell'argomento nullo.

Dovrai quindi verificare anche se prevTrigger esiste. Puoi fare così:

if (prevTrigger && prevTrigger != trigger) {
  // Se c'è un trigger precedente, applica addclassout
  addclassout(prevTrigger);
}

---

Non voglio postare la minestra pronta ma ti invito intanto a provare ad apportare le modifiche come ho indicato.
Fai sapere e se trovi difficoltà cerchiamo di capire come procedere.

Grazie mille, domani che sono a casa provo è ti aggiorno, grazie ancora dell'aiuto.

[doppiaM]

Ho provato a sistemare su codepen(https://codepen.io/doppiaMM/pen/yLwVVKx?editors=1010) c'è lo script con le modifiche suggerite ma il problema persiste.
io credo che il problema sia nel registrare il trigger (i trigger sono le voci del menu) perchè se si mette come era prima

prevTrigger = trigger;
si può notare che:
1- entro con il mouse sul trigger "chi siamo" esegue addclassin e aggiunge le classi a maschere e linea rispettive a al trigger
2- entro con il mouse su "servizi" arrivando da "chi siamo" si può notare che addclassout che aggiunge la classe fadeout e rimuove le altre classi viene eseguito non sul trigger precedente "chi siamo" ma su quello nuovo "servizi" per eseguire poi addclassin sempre su "servizi" e i suoi elementi

cosi facendo rimangono attivi tutti e due perchè in realtà se addclassout dovrebbe essere attivato sul trigger precedente ma non capisco perchè lo attiva su quello in cui si entra.

avevo provato a spostare

prevTrigger = trigger;

sul mouseleave e con il console.log(trigger) vedevo che stampava il trigger giusto ma comunque addclassout veniva eseguito su quello in cui si entrava e non su quello precedente

[KillerWorm]

Leggi bene il punto 6:

6 - Dentro mouseenter , dopo aver eseguito il tutto, dovrai popolare la variabile prevTrigger...

In particolare le prime 2 parole: "Dentro mouseenter".

Cioè dentro la funzione che hai definito come listener di quell'evento. Vedo che non hai fatto esattamente così; il resto mi pare ok ma prova ad aggiustare quel particolare come ho indicato.