jQuery: gestire i pannelli pubblicitari

I pannelli pubblicitari in genere vengono posti all'inizio della pagina e quindi mostrati con un effetto di scorrimento dall'alto in basso. Possiamo gestire facilmente questi pannelli con jQuery. Vediamo come.

Partiamo da questa struttura HTML:

<div id="ads">
	Lorem ipsum dolor sit amet.
</div>

<p class="slide"><a href="#" class="btn-slide">Promozione</a></p>

Applichiamo questi stili CSS:

body {
	margin: 0;
	padding: 0;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#ads {
	background: #754c24;
	height: 200px;
	display: none;
	color: #fff;
	line-height: 200px;
	text-align: center;
	font-size: 6em;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(img/btn-slide.gif) no-repeat center top;
}
.btn-slide {
	background: url(img/white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}

Quello che dobbiamo fare è associare un movimento di scorrimento al pannello e allo stesso tempo modificare dinamicamente la classe CSS del bottone:

$(document).ready(function(){

	$('a.btn-slide').click(function(event) {
	
		$('#ads').slideToggle('slow');
		$(this).toggleClass('active');
		
		event.preventDefault();
	});
	
	 
});

Potete visionare l'esempio finale in questa pagina.