Tutorial Jquery: effetto fade al passaggio del mouse applicato alle immagini

Tutorial Jquery: effetto fade al passaggio del mouse applicato alle immagini

Oggi tratteremo un piccolo tutorial Jquery che ci aiutera’ per capire come lavora questo semplendido e potente linguaggio. In particolare vedremo come aplicare un effetto “fade” al passaggio del mouse su un’immagine.

Partiamo analizzando il prodotto che vogliamo ottenere:

  • L’immagine dovra’, di fatto, impostare un’opacita’ minore al passagio del mouse e maggiore quando il mouse non e’ sull’immagine.
  • Dovremo includere le librerie Jquery per far funzionare il nostro script, pertanto scarichiamole qui:  Scarica Jquery

Ok Iniziamo:

  • Prepariamo la pagina html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Fade In/Fade Out</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="robots" content="NOINDEX,NOFOLLOW" />

<!-- JavaScripts-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>

<div id="content">
	<div class="tutorial">
		<div class="fade_tutorial_title">Effetto Fade Applicato Alle Foto</div>
		<div id="images">
			<a href="#"><img src="images/01.jpg" alt="Angelina" width="121" height="83" class="foto_fade" /></a>
			<a href="#"><img src="images/02.jpg" alt="Jessica" width="121" height="83" class="foto_fade" /></a>
			<a href="#"><img src="images/03.jpg" alt="Rihanna" width="121" height="83" class="foto_fade" /></a>
			<a href="#"><img src="images/04.jpg" alt="Belen" width="121" height="83" class="foto_fade" /></a></div>
	</div>

</div>
</body>
</html>

In questa sezione di codice HTML abbiamo creato il “contenitore” che ci servira’ per far visualizzare le immagini (01.jpg,etc) all’utente finale che visitera’ il nostro sito. Inoltre abbiamo inserito nel documento un richiamo al motore jquery e al nostro script ( vedi porzione “javascript” che creiamo su una pagina distinta).

  • Diamo un pò di stile al documento

Lo stile e’ una delle parti fondamentali del Web 2.0 in quanto e’ estremamente utile e indispensabile anche per la programmazione in  jquery.

Ecco il codice CSS per far funzionare il nostro “mini-progetto”:

/*si definisce il corpo del testo: colore del testo, dello sfondo e carattere */

*{
	padding:0;
	margin:0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	padding:0;
	margin:0;
	background-color:#fff;
	font-size: 12px;
	color: #333;

}

/*foto_fade e' la parte piu' importante, vedi la sezione "jquery" */

.foto_fade {
	border: 1px solid #575757;
	margin-left: 10px;
}

.img {
	border: 1px solid #575757;
	margin-left: 12px;
}

/*Contenitore principale dove vengono visualizzate le immagini, si imposta la larghezza e il margine */

.tutorial {
	float: left;
	width: 570px;
	margin-top: 20px;
}

#content {
	width: 570px;
	margin: auto;
}

/*si definisce il titolo sopra le immagini (vedi demo) */
.fade_tutorial_title {
	float: left;
	font-size: 18px;
}

/*si imposta la distanza tra un'immagine all'altra, la dimensione totale che devono occupare tutte le immagini (552px;) */

#images {
	width: 552px;
	border: 1px solid #E8E3E4;
	float: left;
	margin-top: 7px;

	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 8px;
	padding-left: 8px;
}

Leggete i commenti del codice per una spiegazione dettagliata del foglio di stile.

  • Ultimo passo: animiamo con Jquery

Creiamo un nuove file e chiamiamolo custom.js ( o un nome a nostro piacimento), e incollateci dentro questo codice (vedi i commenti del codice per capire come funziona) :

//Effetto fade applicato alle foto
$(function() {
// Opacità delle immagini impostate al 50%
$(".foto_fade").css("opacity","0.5");

// Al passaggio del mouse
$(".foto_fade").hover(function () {

// imposta l'opacità al 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// quando il mouse non è sull'elemento
function () {

// imposta l'opacità al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

//Effetto fade applicato al testo
$(function() {
// Opacità del testo impostata al 50%
$("#text p").css("opacity","0.5");

// Al passaggio del mouse
$("#text p").hover(function () {

// imposta l'opacità al 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// quando il mouse non è sull'elemento
function () {

// imposta l'opacità al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

//effetto fade applicato al div
$(function() {
// Opacità del div impostata al 50%
$("#div").css("opacity","0.5");

// Al passaggio del mouse
$("#div").hover(function () {

// imposta l'opacità al 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// quando il mouse non è sull'elemento
function () {

// imposta l'opacità al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

Ecco fatto!, ricordate di collegare il file appena creato nel file html;  – Ora potete vedere il risultato del Jquery Fade –

  1. If you’d like to learn more about java technology visit our Geek’s Guide on Java training.

    There you’ll find recorded webcasts, videos, white papers, and free tools that can teach you

    all you need to know about this cool and often overlooked technology…

    java training

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Inspiration Web Design - Love web company

Inspiration Web Design - Love web company