Sponsors
Statistiques
Nb connectés : 12
Nb membres : 2187
Nb visiteurs :
Nb hits : 6652
Vous êtes ici : Accueil > Javascript > Divers > Bouton avec effet de fade en Jquery

Trouver une ressource
Trouvez une ressource parmi les 92 tutoriaux, 294 messages d'aide etc...

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Bouton avec effet de fade en Jquery
Information sur le tutoriel
Visuel non disponible
Bouton avec effet de fade en Jquery

Catégorie : Divers
Niveau : Débutant
Auteur : kyrepo
Publication : le 26/03/2010 à 23:52:42
Note : 4/5 | 794 vues | 2 commentaires
(Mis à jour le 27/03/2010 à 08:41:24)
|
|
Dans ce tutoriel nous utiliserons la fonction "fadeTo", afin de réaliser un bouton avec un effet de fade. Cette fonction modifie l"opacité des élements sélectionnés et permet de lancer une fonction à la fin de l"animation. Seule l"opacité est ajustée pour cette animation, ce qui signifie que tous les élements sélectionnés doivent déja avoir une hauteur et une largeur spécifiée.

Code à placer entre les balises <head></head> de votre page :

Code :
<!--On appelle la librairie JQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--Script du fade-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
<!--Si l"on est sur le bouton-->
$("#menu a").mouseover(function() {
<!--Vistesse 200 et opacité à 70% (0.7)-->
$(this).fadeTo(200, 0.7);
});
<!--Si l"on n"est plus sur le bouton-->
$("#menu a").mouseout(function() {
<!--Vistesse 300 et opacité à 100% (1)-->
$(this).fadeTo(300, 1);
});
});
//]]>
</script>
<!--Mise en forme de notre bouton-->
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
color: #ffffff;
}
#menu .bouton {
display: block;
float: left;
padding: 8px;
background-color:#0099CC;
margin-right: 1px;
text-decoration: none;
color:#FFFFFF;
}
-->
</style>


Code à placer entre les balises <body></body> de votre page :

Code :
<!--Affichage d"un bouton-->
<div id="menu">
<a href="#" class="bouton">Accueil</a>
<div style="clear: both;"></div>
</div>


Et voilà ce tutoriel est terminé !
Les commentaires
Il y a 2 commentaire(s) déjà posté(s)

Commentaire de titi
Ajouter le 27/03/2010 à 08:50:55

Bravo, simple efficace, pratique à mettre en oeuvre lorsqu'on a de nombreux boutons et pas forcement envie de remplir sa librairies de moultes elements

De plus, très simplement paramétrable !
D'ici peu, je mettrai mon site enligne ce qui donnera la veritable dimension de ce petit bout de code.

Un gros bravo :)
Commentaire de henri9
Ajouter le 09/04/2014 à 11:22:42

J'ai pas tout compris...
Merci de bien vouloir nous donner votre avis sur ce tutoriel !
[ Pour cela vous devez être connecté avec votre compte ]