[ENSG] Bouton agrandir texte
by toubia95
HTML
<button id="agrandir">A+</button>
<button id="diminuer">RAZ</button>
<h2>Titre</h2>
<p>
Cyprum itidem insulam procul a continenti discretam et
portuosam inter municipia crebra urbes duae faciunt claram
Salamis et Paphus, altera Iovis delubris altera Veneris templo
insignis. tanta autem tamque multiplici fertilitate abundat
rerum omnium eadem Cyprus ut nullius externi indigens
adminiculi indigenis viribus a fundamento ipso carinae ad
supremos usque carbasos aedificet onerariam navem
</p>
CSS
/* http://webtutoriaux.com/tutoriel-193-Jquery-Agrandir-ou-diminuer-un-texte-avec-des-boutons.html */
h2 {
font-size: 21px;
}
p {
font-size : 13px;
}
JavaScript
$(document).ready(function() {
$('#diminuer').hide();
$('#agrandir').click(function() {
$('h2, p').stop().animate({fontSize:'+='+5,lineHeight:'+='+0}, 300);
$('#agrandir').hide();
$('#diminuer').show();
});
$('#diminuer').click(function() {
$('h2').stop().animate({fontSize: '21px'}, 300);
$('p').stop().animate({fontSize: '13px'}, 300);
$('#agrandir').show();
$('#diminuer').hide();
});
});