CSS e animazioni jQuery: aspetti da considerare

  • jQuery
  • Gabriele Romanato

Le animazioni jQuery utilizzano le proprietà CSS per poter operare. Quindi è di fondamentale importanza conoscere l'effetto che alcune proprietà CSS hanno sugli elementi al fine di evitare problemi nella visualizzazione.

Slideshow e proprietà overflow

Negli slideshow la proprietà CSS overflow serve a limitare la quantità di contenuto visibile. Per esempio:


#slideshow {
	width: 500px;
	overflow: hidden;
}

#slides-wrapper {
	width: 5000px;
	height: 400px;
}

In questo caso la dichiarazione overflow: hidden limita la larghezza visibile a 500 pixel, anche se il contenitore delle slide è largo 5000 pixel. Questa dichiarazione ha però un effetto collaterale: se volessimo infatti posizionare due bottoni per la navigazione delle slide ai lati del contenitore, non potremmo farlo perchè essi verrebbero tagliati fuori in quanto posizionati all'esterno dei 500 pixel disponibili.

La soluzione in questo caso è quella di aggiungere un elemento intermedio tra il contenitore principale e quello delle slide:


<div id="slideshow">
	<div id="slideshow-inner">
		<div id="slides-wrapper"><!--slide--></div>
	</div>
	<a href="#" id="previous"><</a>
	<a href="#" id="next">></a>
</div>

Quindi avremo:


#slideshow {
	width: 500px;
	position: relative;
}

#slideshow-inner {
	width: 500px;
	overflow: hidden;
}

#slides-wrapper {
	width: 5000px;
	height: 400px;
}

#previous, #next {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	margin-top: -10px;
}

#previous {
	left: -20px;
}

#next {
	right: -20px;
}

In questo caso i bottoni saranno visibili in quanto il contenitore principale non ha più la proprietà overflow impostata su hidden.

Posizionamento

I tipi di posizionamento più usati nelle animazioni sono:

  • position: relative
  • position: absolute

Nel primo tipo le coordinate dell'elemento vengono calcolate in base alla sua posizione corrente. Quindi se un elemento ha un margine sinistro di 15 pixel, l'animazione partirà da quei 15 pixel a sinistra.

Nel secondo tipo, invece, le coordinate vengono calcolate partendo dall'intera pagina. L'unica eccezione si ha quando il genitore dell'elemento animato ha la dichiarazione position: relative o position: absolute. In questo caso si parla di posizionamento contestuale e le coordinate verranno calcolate a partire dall'elemento genitore e non dall'intera pagina.

Floating

La proprietà CSS float viene spesso usata per allineare gli elementi su più righe. Usando questa proprietà, lo spazio verticale dell'elemento che contiene il float collassa, a meno che questo genitore non abbia un'altezza dichiarata o non venga usato un metodo per contenere il floating, come ad esempio overflow: hidden.

Se il genitore è posizionato relativamente, il metodo jQuery position() restituirà correttamente le coordinate di ciascun elemento flottato all'interno di tale genitore.

Per evitare che i float vadano su una nuova riga in modo casuale, è necessario calcolare lo spazio disponibile e ripartirlo su ciascun float. Se ad esempio abbiamo un contenitore largo 300 pixel e vogliamo tre float su ciascuna riga con uno spazio orizzontale e verticale tra ogni elemento, possiamo scrivere:


div.float {
	width: 95px;
	margin: 0 5px 5px 0;
	float: left;
}

Ossia 95 di larghezza più i 5 pixel del margine destro fanno 100 pixel e 300 diviso 3 fa appunto 100.

Torna su