jQuery: pannelli dinamici

L'effetto dei panelli dinamici che si espandono è abbastanza semplice da ottenere con jQuery. Quello di cui abbiamo bisogno sono delle liste non ordinate contenenti dei link le cui dimensioni e il testo verranno modificati al passaggio del mouse. Dato che il contenitore dei link ha una larghezza fissa, la somma delle larghezze dei singoli pannelli non dovrà mai superare quella del contenitore generale. Ovviamente possiamo agevolmente risolvere il problema del contenuto in eccesso usando la proprietà overflow. Vediamo i dettagli.

Abbiamo la seguente struttura HTML che contiene due serie di pannelli:

<div id="panels-container">
	<ul class="panels">
		<li>
			<a href="#">1</a>
		</li>
		<li>
			<a href="#">2</a>
		</li>
		<li>
			<a href="#">3</a>
		</li>
		<li>
			<a href="#">4</a>
		</li>
		<li>
			<a href="#">5</a>
		</li>
	</ul>
	<ul class="panels">
		<li>
			<a href="#">A</a>
		</li>
		<li>
			<a href="#">B</a>
		</li>
		<li>
			<a href="#">C</a>
		</li>
		<li>
			<a href="#">D</a>
		</li>
		<li>
			<a href="#">E</a>
		</li>
	</ul>
</div>

Il nostro CSS avrà le seguenti regole:

#panels-container {
	width: 900px;
	margin: 2em auto;
	font: 100% Arial, sans-serif;
}

.panels {
	margin: 0;
	padding: 0;
}

.panels,
.panels a,
.panels li {
	height: 200px;
	overflow: hidden;
}

.panels {
	background: #ddd;
	margin: 0 0 20px;
	position: relative;
	width: 900px;
}

.panels li {
	float: left;
	font-size: 100px;
	line-height: 200px;
	list-style: none;
	text-align: center;
	width: 180px;
}

.panels li.last,
.panels li:last-child {
	border: 0;
	float: none;
	position: absolute;
	top: 0;
	right: 0;
}

.panels a {
	background: #ccc;
	color: #666;
	display: block;
	text-decoration: none;
	width: 100%;
}

.panels a:hover {
	background: #bbb;
	color: #000;
	font-weight: bold;
	text-shadow: #fff 0 5px 5px;
}

I pannelli hanno le dimensioni di 180 x 200 pixel e sono stati allineati tramite il floating. Con jQuery dobbiamo prima verificare che nella pagina ci sia effettivamente la struttura HTML richiesta e poi dobbiamo effettuare le seguenti operazioni sui pannelli al passaggio del mouse:

1. aumentare la larghezza del pannello fino a 360 pixel e le dimensioni del font in uso
2. aggiustare le dimensioni dei fratelli adiacenti del pannello corrente riducendole a 135 pixel insieme con la dimensione del font in uso

Ecco il codice jQuery:

var Panels = {
	
	exists: function() {
	
		if(!$('ul.panels').length) {
		 
			return false;
			
		}

		return true;
	},
	
	init: function() {
	
	    var speed = 200;
	
		if(this.exists()) {
		
			
			$('li', 'ul.panels').hover(function() {

				$(this).stop().animate({
					width: '360px',
					fontSize: '150px'

		
				}, speed)

				.siblings('li').stop().animate({
					width: '135px',
					fontSize: '50px'

				}, speed);
			},

			function() {

				$(this).stop().animate({
					width: '180px',
					fontSize: '100px'

				}, speed)

				.siblings('li').stop().animate({
					width: '180px',
					fontSize: '100px'

			}, speed);
		});

		
		
		} else {
		
			return;
		
		}
	
	
	}

};

Il metodo stop() viene utilizzato per evitare un fastidioso concatenarsi di animazioni in sequenza. L'uso del precedente codice è il seguente:

$(function() {

	Panels.init();

});

Potete visionare l'esempio finale in questa pagina.