jQuery fadeIn() method serve, non solo a mostrare un elemento, ma anche ad applicare un effetto dissolvenza. Questo metodo infatti è molto simile al metodo show(), così come il metodo fadeOut() è simile a hide().
Ricordiamo inoltre che i parametri indicati sono opzionali e si possono anche utilizzare singolarmente.
Esempio di utilizzo di jQuery fadeIn()
Ripetiamo lo stesso esempio che abbiamo già trattato con i metodi hide() e show() in questo tutorial: jQuery show(), così da capirne la differenza.
Cliccate quindi sui due pulsanti, mostra e nascondi, in modo da applicare l’effetto dissolvenza.
Benvenuti su Coding Creativo
Per realizzare questo esempio, prima del file JavaScript che contiene il metodo fadeIn(), ho inserito al solito la libreria jQuery, vi allego il link sotto:
Dopo, nella pagina html, ho inserito un livello (div) che sarà nascosto o scoperto, grazie ai due pulsanti, che si possono anche definire trigger. Infatti, se cliccati, i pulsanti faranno partire un’azione.
<div class="testo">Benvenuti su Coding Creativo</div>
<button id="nascondi">Nascondi</button>
<button id="scopri">Mostra</button>
Poi costruisco la mia semplice funzione in un file JavaScript a parte.
Ecco quindi il codice per realizzare questo semplice esempio che utilizza il jQuery fadeIn() method ed il fadeOut().
Ho impostato il tempo a piacere. Fate la prova ad impostare le varie velocità e anche la modalità swing per capire la differenza.
Esempio 2 per testare le varie velocità del metodo fadeIn()
Facciamo un secondo esempio per testare la velocità dell’effetto a dissolvenza utilizzando i metodo precedenti,
Cliccate sul pulsante sotto, vedrete apparire tre box che si coloreranno con effetto dissolvenza e con tempi diversi.
Possiamo notare subito che il metodo fadeIn() ha delle velocità diverse.
Cominciamo a realizzare questo effetto, creando innanzitutto la pagina html in cui inserisco tre livelli (div) con id diverso. A seguire inserisco poi un pulsante (trigger) su cui attivare l’evento.
Dopo creiamo la formattazione CSS per i tre livelli (div), dove è importante specificare la proprietà display:none, in modo tale da renderli invisibili prima che si verifichi l’evento. Su questi elementi agirà il metodo fadeIn().
Infine realizziamo il nostro script, in un file JavaScript a parte, ed inserismo il collegamento dello script nel file html. In questo modo abbiamo ottenuto il nostro effetto.
In questa lezione studieremo il metodo jQuery hover().
Nella scorsa lezione abbiamo studiato i metodi mouseover(), mouseout(), mousemove(), mouseenter() e mouseleave(), cercando di capirne le differenze d’uso.
Il metodo hover() specifica due funzioni da eseguire quando il mouse passa sopra l’elemento e quando si allontana. La prima funzione specifica cosa succede quando il puntatore del mouse passa sopra l’elemento, mentre la seconda quando il puntatore del mouse non è più sopra l’elemento. In definitiva fa quello che mouseenter() e mouseleave() fanno utilizzate assieme.
Quindi in questo caso la sintassi è:
$(selettore).hover(handlerIn, handlerOut)
Dove, come dicevamo prima con handlerIn intendiamo la funzione che specifica cosa fare quando il mouse tocca l’elemento, mentre handlerOut specifica cosa fare quando il mouse esce dall’elemento. HandlerOut è opzionale ed in questo caso verrà sempre eseguita handlerIn sia per mouseenter() che per mouseleave().
Esempio con jQuery hover() method
Riprendiamo lo stesso esempio che abbiamo creato in un articolo precedente e lo modifichiamo in modo da utilizzare il metodo .hover().
Passate dunque sul livello sotto, noterete che la formattazione cambierà.
Coding creativo. Porta il mouse su questo paragrafo
Per realizzare questo semplice esempio, innanzitutto includiamo la libreria jQuery.
Dopo inseriamo il nostro livello su cui vogliamo si verifichi l’evento.
<div id="stile">Coding creativo. Porta il mouse su questo paragrafo</div>
Quindi realizziamo lo script. La prima funzione richiama il metodo css a cui ho dato una specifica formattazione, la seconda funzione richiama sempre il metodo css ma con un’altra formattazione.
In questo secondo esempio su jQuery hover() method scriveremo un testo differente a seconda se il mouse sia o no sopra l’elemento.
Coding creativo. Porta il mouse su questo paragrafo
Per realizzare questo esempio inseriamo il nostro livello e all’interno aggiungiamo il tag span che rappresenta il punto dove far apparire il nostro testo.
<div id="livello">Coding creativo. Porta il mouse su questo paragrafo <span></span></div>
Dopo aggiungiamo la libreria jQuery e infine il nostro semplicissimo script che fa uso anche del metodo text.
Altri metodi utilizzati per gestire il movimento del mouse nella pagina che vi spiegherò sono mouseenter(), mousemove() e mouseleave().
Questi metodi hanno la stessa sintassi dei metodi precedenti, ma hanno scopi differenti.
Esempio con utilizzo del metodi mouseenter(), mousemove() e mouseleave()
Fate dunque la prova a passare sopra il testo inserito sotto, comparirà del testo aggiuntivo. Per fare comparire il testo ho utilizzato anche il metodo text.
Coding creativo. Vai qui con il mouse inserirò un testo.
Sicuramente vi chiederete quale differenza c’è con il metodo mouseover() studiato nella lezione precedente.
La differenza è che il metodo mouseover() estende l’evento agli elementi figli, mentre con mouseenter() ciò non accade.
Ve lo spiego bene con un classico esempio.
Differenza tra mouseover() e mouseenter()
Fate la prova a passare il mouse sul primo box, che utilizza il metodo mouseover(), noterete che il numero all’interno si incrementa se il movimento persiste all’interno del box.
Mentre ciò non accade per il secondo box che utilizza il metodo mouseenter(). Per incrementare il numero occorre infatti uscire dal box e ritornare.
Coding creativo.
Attenzione al numero:
Coding creativo.
Attenzione al numero:
L’esempio si realizza molto semplicemente creando due box con l’html e i css. Ecco dunque il codice HTML:
<div id="stile3" class="box1">
<p>Coding creativo.</p>
<p>Attenzione al numero: <span></span></p>
</div>
<div id="stile2" class="box1">
<p>Coding creativo.</p>
<p>Attenzione al numero: <span></span></p>
</div>
Ecco il codice CSS che potete inserire anche come foglio di stile interno.
Dopo includiamo sempre la nostra libreria e poi aggiungiamo lo script, dove inizializziamo le variabili x e y a zero. Queste variabili poi saranno incrementate di uno ogni volta che si va all’interno del box.
Anche qui abbiamo utilizzato il metodo text.
Ecco dunque lo script completo.
<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
var x = 0;
var y = 0;
$(document).ready(function(){
$("#stile3").mouseover(function(){
$("#stile3 span").text(x++);
});
$("#stile2").mouseenter(function(){
$("#stile2 span").text(y++);
});
});
</script>
Esempio con il metodo mousemove()
Infine vediamo un esempio con il metodo mousemove() che si attiva ogni volta che il puntatore del mouse si sposta sull’elemento scelto.
Quindi facciamo un esempio che ne spieghi bene il funzionamento. Nel primo box utilizzo mouseover(), nel secondo mouseenter() mentre nel terzo utilizzo mousemove().
Coding creativo.
Attenzione al numero:
Coding creativo.
Attenzione al numero:
Coding creativo.
Attenzione al numero:
Per realizzare quest’ultimo esempio allego lo script completo.
<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = 0;
var b = 0;
var c = 0;
$(document).ready(function(){
$("#stile4").mouseover(function(){
$("#stile4 span").text(a++);
});
$("#stile5").mouseenter(function(){
$("#stile5 span").text(b++);
});
$("#stile6").mousemove(function(){
$("#stile6 span").text(c++);
});
});
</script>
<div id="stile4" class="box1">
<p>Coding creativo.</p>
<p>Attenzione al numero: <span></span></p>
</div>
<div id="stile5" class="box1">
<p>Coding creativo.</p>
<p>Attenzione al numero: <span></span></p>
</div>
<div id="stile6" class="box1">
<p>Coding creativo.</p>
<p>Attenzione al numero: <span></span></p>
</div>
<div class="clear"></div>
Il metodo mouseleave() è molto simile a mouseout() ma si comporta diversamente. Infatti mouseout() si attiva quando il puntatore del mouse lascia tutti gli elementi figli e l’elemento selezionato, mentre mouseleave() si attiva solo quando il puntatore del mouse lascia l’elemento selezionato.
Provate voi stessi adesso a fare degli esempi. Per qualsiasi dubbio inserite pure un commento sotto, nella sezione commenti.
Questi sono solo dei semplici esempi d’uso dei metodi mouseover(), mouseout(), mouseenter(), mousemove() e mouseleave().
jQuery mouseover() method – In questa lezione studieremo il metodo mouseover() che si verifica quando, come suggerisce già il nome, passiamo su un elemento di una pagina web con il nostro mouse.
Quindi potremmo ad esempio desiderare di mostrare una descrizione quando passiamo su un’immagine o su un titolo, ecc…
La sintassi di questa funzione è dunque questa:
$(selettore).mouseover()
o si può anche, come abbiamo visto negli altri metodi, collegare una funzione che chiaramente può essere opzionale.
$(selettore).mouseover(funzione).
Spesso questo metodo viene utilizzato insieme al metodo mouseout() che ha la stessa sintassi, infatti:
$(selettore).mouseout()
$(selettore).mouseout(funzione).
Esempio di utilizzo di jQuery mouseover() method
Facciamo subito un esempio per capire lo scopo del metodo.
Passate sulla scritta sotto con il mouse, vedrete la formattazione del testo modificare, quando il puntatore del mouse è sopra il testo. Ma anche quando il puntatore del mouse si allontana, la formattazione rispetto alla situazione iniziale cambia.
Coding creativo. Porta il mouse su questo paragrafo
Per realizzare questo semplice esempio ho creato innanzitutto un livello impostando l’id uguale a stile.
<div id="stile">Coding creativo. Porta il mouse su questo paragrafo</div>
Poi ho realizzato lo script utilizzando jQuery mouseover() method e anche il metodo mouseout(). Ho utilizzato anche il metodo css() che ho spiegato nella lezione precedente per cambiare formattazione al testo.
Realizziamo una jQuery Gallery, ovvero una galleria con jQuery per lo scorrimento delle immagini.
Per realizzare un semplice esempio di jQuery gallery utilizzeremo il metodo attr(). Successivamente utilizzeremo altri metodi per creare gallerie più accattivanti, quindi considerate questo esempio puramente didattico.
Abbiamo già realizzato in precedenza una galleria semplicemente utilizzando JavaScript a questo link: galleria immagini javascript.
Esempio di jQuery Gallery
Immaginiamo quindi di voler realizzare il seguente esempio:
Per realizzare questo esempio creiamo innanzitutto la nostra cartella image. Dopo salviamo all'interno di essa le nostre immagini tutte con il nome coding seguite da un numero.
Ad esempio coding1, coding2, ecc.
Supponiamo allora di voler inserire ad esempio 6 immagini e di voler creare dei pulsanti per scorrere le nostre immagini.
Creiamo innanzitutto il livello che conterrà l'immagine e i nostri due pulsanti avanti e indietro. Notate che ho dato id="back" per il pulsante indietro, id="next" per il pulsante avanti e id="immagini" per le nostre immagini. Questi valori mi serviranno poi per implementare le nostre funzioni con jQuery.
Infine creiamo la funzione per fare scorrere le immagini.
La nostra prima immagine sarà quella con indice i=1, cioè l'immagine di partenza sarà coding1. Dato che ho detto di voler inserire 6 immagini allora l'immagine finale sarà coding6, quindi inizializzo max=6, cioè il nostro indice arriverà dunque a 6.
Successivamente creo le due funzioni back e next per fare scorrere le immagini. Se l'indice diventa inferiore ad 1 allora faccio visualizzare l'ultima immagine. Se l'indice invece supera il valore massimo allora faccio ritornare l'indice a 1.
Allego lo script completo della semplice jQuery gallery realizzata a scopo didattico.
<script type="text/javascript">
$(document).ready(function(){
var i=1;
var max=6;
$("#immagini").attr('src', "images/coding" + i + ".jpg");
$("#back").click(function(){
i--;
if(i<1)
i=max;
$("#immagini").attr('src', "images/coding" + i + ".jpg");
});
$("#next").click(function(){
i++;
if(i>max)
i=1;
$("#immagini").attr('src', "images/coding" + i + ".jpg");
});
});
</script>
Chiaramente questo è un esempio molto banale di jQuery gallery, ma è importante per imparare alcune funzionalità base del linguaggio e rafforzare i metodi studiati finora.
Non mancheranno più avanti tanti altri esempi più professionali con relativa spiegazione.
Se fate la prova a cliccare sul pulsante sotto, apparirà una nuova finestra di dialogo con il titolo dell’immagine, la dimensione in larghezza e in altezza.
Per realizzare questo esempio ho inserito la nostra immagine e il pulsante subito sotto.
Includo la libreria e infine creo la semplicissima funzione utilizzando JQuery attr() method con questa sintassi: $(selettore).attr(attributo, valore).
Dopo inserisco la mia funzione utilizzando la sintassi $(selettore).attr(attributo, function(index, classe_corrente)), non dimenticando di includere la libreria jQuery. Rimpicciolisco l’immagine di 20 pixel ad ogni clic del pulsante sia in larghezza che in altezza.
<script type="text/javascript">
$(document).ready(function(){
$("#piccola").click(function(){
$("img").attr("width",function(n,l){
return l - 20;
});
$("img").attr("height",function(n,h){
return h - 20;
});
});
});
</script>
Commenti recenti