Transition des liens texte en utilisant un effet JQuery
Date de publication : 20/04/2009
Par
Alen Grakalic (CSS Globe)
Yannick Komotir(Traducteur)
Voici une astuce simple qui peut être facilement mis en
application dans vos sites Web. Avec quelques lignes de code, JQuery fera la transition de la couleur de vos liens vers
une autre au passage de la souris.
a. Principe
b. Comment appliquer ce script sur votre site
b-1. Étape 1 - JavaScript
b-2. Étape 2 - Css
b-3. Étape 3 - Modifications
c. Liens de téléchargement
a. Principe
L'idée est similaire à celle que j'ai déjà utilisé pour d'autres trucs.
J'ai écrit un script qui sélectionne les liens (balise a), place son contenu dans un SPAN avec "One" comme nom de classe et
ajoute un élément SPAN avec "two" comme nom de classe .
SPAN "two" contient le même texte que A et est placé juste au-dessus à droite du texte en lien.
Au départ de le deuxième SPAN est caché.
Lorsque le lien a est survolé SPAN "two" transite en utilisant l'effet fadeTo de jQuery, pendant SPAN "one" disparaît.
Cela crée un effet fondu en douceur vers une autre couleur.
Voici le script entier comme je l'ai dans ma démo.
this.fadeLinks = function() {
var selector = "a"; //modifier cette ligne pour cibler un sélecteur
var speed = "normal" // Ajuster la vitesse du fondu ("slow", "normal", "fast")
var bgcolor = "#fff";
// malheureusement, nous devons spécifier la couleur
// de l'arrière-plan pour raison de compatibilité avec IE
// Utiliser la même couleur de fond dans vos liens que celle de votre page.
$(selector).each(function(){
$(this).css("position","relative");
var html = $(this).html();
if($.browser.msie){
$("span.one",$(this)).css("background",bgcolor);
$("span.two",$(this)).css("background",bgcolor);
$("span.one",$(this)).css("opacity",1);
};
$("span.two",$(this)).css("opacity",0);
$("span.two",$(this)).css("position","absolute");
$("span.two",$(this)).css("top","0");
$("span.two",$(this)).css("left","0");
$(this).hover(
function(){
$("span.one",this).fadeTo(speed, 0);
$("span.two",this).fadeTo(speed, 1);
},
function(){
$("span.one",this).fadeTo(speed, 1);
$("span.two",this).fadeTo(speed, 0);
}
)
});
};
|
Bien sûr, IE est à l'origine de problèmes dont nous avons eu à appliquer une solution de contournement.
Etant donné qu'en transitant IE pixelise le text nous devons définir une couleur d'arrière plan pour l'éviter.
b. Comment appliquer ce script sur votre site
b-1. Étape 1 - JavaScript
Téléchargez le fichier zip contenant le script et le paquet de la bibliothèque jQuery, placez-les sur votre site.
J'ai toujours l'habitude de mettre tous les fichiers JavaScript dans un répertoire appelé "/js".
Ensuite, inclure les lignes de code suivantes dans le but de faire appel à la bibliothèque jQuery et
au script de décoloration.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fadeLinks.js"></script>
|
b-2. Étape 2 - Css
Ajoutez ces lignes à votre fichier CSS.
Notez que j'utilise le selecteur a du fait que c'est une démo.
Le style de a est la valeur par défaut et le style de SPAN est utilisé lorsque le lien est survolé.
a{
color:#f30;
font-weight:bold;
text-decoration:none;
}
a span.two{
color:#069;
cursor:pointer;
}
|
b-3. Étape 3 - Modifications
Assurez-vous que les sélecteurs CSS sont correctement écrit de sorte que vous pouvez appliquer ce script sélectivement.
Sinon, elle sera applicable à toutes les balises a du document. La modification des sélecteurs doit être fait dans le CSS et dans le srcipt.
Si vous souhaitez appliquer cet effet à l'intérieur de vos liens avec le contenu div id = "content",
alors votre css devrait être écrit comme ceci:
#content a{
color:#f30;
font-weight:bold;
text-decoration:none;
}
#content a span.two{
color:#069;
cursor:pointer;
}
|
Dans le fichier fadeLinks.js la variable appelant le sélecteur devrait ressembler à ceci:
var selector = "#content a";
|
Dans le cas où vous trouvez votre transition trop lente ou trop rapide, vous pouvez ajuster la variable appelée speed.
Donnez-lui la valeure "slow", "normal" ou "fast".
c. Liens de téléchargement
Copyright © 2009 Developpez LLC.
Aucune reproduction, même partielle, ne peut être faite
de ce site ni de l'ensemble de son contenu : textes, documents, images, etc.
sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à
trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
