Existe-t-il un moyen de sélectionner/manipuler des pseudo-éléments CSS tels que ::before et ::after (et l'ancienne version avec un point-virgule) à l'aide de jQuery ?

Par exemple, ma feuille de style a la règle suivante :

Span::after( content:"foo" )

Comment puis-je changer « foo » en « bar » en utilisant jQuery ?

Vous pouvez également transmettre le contenu du pseudo-élément à l'attribut data puis utiliser jQuery pour le manipuler :

Fou

$("span").hover(function())( $(this).attr("data-content","bar"); ));

Span:after ( content: attr(data-content) " tout autre texte que vous pourriez souhaiter"; )

Si vous souhaitez empêcher l'affichage de "l'autre texte", vous pouvez combiner cela avec la solution de seucolega comme ceci :

Fou

$("span").hover(function())( $(this).addClass("change").attr("data-content","bar"); ));

Span.change:after ( content: attr(data-content) " tout autre texte que vous pourriez souhaiter"; )

Ce n'est pas pratique car je n'ai pas écrit ceci pour une utilisation réelle, juste pour vous donner un exemple de ce qui pourrait être réalisé.

Css = ( avant : function(elem,attr)( if($("#cust_style") !== non défini)( $("body").append(" "); ) else ( $("#cust_style") .remove(); $("body").append(" " + elem + ":before (" + attr + ") "); ) ), après : function(elem,attr)( if($("# cust_style") !== non défini)( $("body").append(" "); ) else ( $("#cust_style").remove(); $("body").append(" " + elem + ":après (" + attr + ") "); ) ) )

cet ajout ajoute actuellement un élément ou ajoute un élément Style qui contient l'attribut requis qui affectera l'élément cible après l'élément pseudo.

cela peut être utilisé comme

Css.after("someElement"," content: "Test"; position: "absolute"; ") // édition/ajout de styles à:after

Css.avant(...); // pour affecter le pseudo-élément avant.

comme après : et avant : les pseudo-éléments ne sont pas directement accessibles via le DOM, il n'est actuellement pas possible d'éditer librement des valeurs CSS spécifiques.

ma méthode n'était qu'un exemple et ce n'est pas très bon pour la pratique, vous pouvez la changer, essayer certaines de vos propres astuces et la rendre correcte pour une utilisation dans le monde réel.

Alors faites vos propres expériences avec ceci et d’autres !

accueille - Adarsh ​​​​Khedde.

Merci tout le monde! J'ai réussi à faire ce que je voulais :D http://jsfiddle.net/Tfc9j/42/ regarde ici

Je voulais que l'opacité du div externe soit différente de l'opacité du div interne et ce changement en cliquant ailleurs ;) Merci !

$("#ena").on("click", function () ( $("head").append("#ena:before ( opacity:0.3; )"); )); $("#duop").on("click", function (e) ( $("head").append("#ena:before ( opacity:0.8; )"); e.stopPropagation(); )) ; #ena( largeur:300px; hauteur:300px; bordure:1px noir uni; position:relative; ) #duo( opacité:1; position:absolue; haut:50px; largeur:300px; hauteur:100px; couleur d'arrière-plan:blanc ; ) #ena:before ( contenu : attr(data-before); couleur : blanc ; curseur : pointeur ; position : absolue ; couleur d'arrière-plan : rouge ; opacité : 0,9 ; largeur : 100 % ; hauteur : 100 % ; )

duoyyyyyyyyyyyyyy p

Vous pouvez créer une fausse propriété ou en utiliser une existante et en hériter dans la feuille de style du pseudo-élément.

var commuté = faux ; // Activer le changement de couleur setInterval(function () ( var color =switch ? "red" : "darkred"; var element = document.getElementById("arrow"); element.style.backgroundColor = color; // Gestion du pseudo-élément "s css // utilisation de l'héritage. element.style.borderLeftColor = color;switched = !switched; ), 1000); .arrow ( /* FIXER LA PROPRIÉTÉ FICTIONNELLE */ border-left-color:red; background-color:red; width:1em; height:1em; display:inline-block; position:relative; ) .arrow:after ( border-top:1em solid transparent; border-right:1em solid transparent; border-bottom:1em solid transparent; border- gauche:1em solide transparent; /* HÉRITER LA PROPRIÉTÉ */ border-left-color:inherit; contenu:""; largeur:0; hauteur:0; position:absolue; gauche:100%; haut:-50%; )

Cela ne semble pas fonctionner pour la propriété content :(

Vous ne pouvez pas sélectionner de pseudo-éléments dans jQuery car ils ne font pas partie du DOM. Mais vous pouvez ajouter une classe spécifique à l'élément père et manipuler ses pseudo-éléments en CSS.

$("envergure").addClass("changement");

Span.change:after ( contenu : "bar")

Bien qu'ils soient rendus par les navigateurs via CSS comme s'ils étaient similaires à d'autres éléments réels du DOM, les pseudo-éléments eux-mêmes ne font pas partie du DOM car les pseudo-éléments, comme leur nom l'indique, ne sont pas de vrais éléments et vous ne pouvez donc pas les sélectionner et les manipuler directement. en utilisant jQuery (ou n'importe lequel API JavaScript, sinon API des sélecteurs). Cela s'applique à tous les pseudo-éléments dont vous essayez de modifier les styles via un script, pas seulement ::before et::after .

Vous ne pouvez obtenir les styles de pseudo-éléments que directement au moment de l'exécution via CSSOM (pensez à window.getComputedStyle()), qui n'est pas exposé à jQuery en dehors de .css() , une méthode qui ne prend pas non plus en charge les pseudo-éléments.

Vous pouvez toujours trouver d’autres moyens de contourner ce problème, mais à titre d’exemple :

Un moyen efficace, mais peu efficace, consiste à ajouter une règle à un document avec un nouveau contenu et à le référencer avec une classe. En fonction des besoins, la classe peut exiger un identifiant unique pour chaque valeur du contenu.

$("span.id-after:after(content:bar;)").appendTo($("head")); $("span").addClass("id-after");

J'ai déjà répondu à cette question, mais pour être super cool, je vais la répéter pour vous.

La réponse doit être Oui et Non. Vous ne pouvez pas sélectionner un élément à l'aide d'un pseudo-sélecteur, mais vous pouvez ajouter une nouvelle règle à la feuille de style à l'aide de javascript.

J'ai fait quelque chose qui devrait fonctionner pour vous :

Var addRule = function(sheet, selector, styles) ( if (sheet.insertRule) return sheet.insertRule(selector + " (" + styles + ")", sheet.cssRules.length); if (sheet.addRule) return sheet .addRule(sélecteur, styles); ); addRule(document.styleSheets, "body:after", "content: "foo"");

::avant

Le style calculé dans "avant" était le contenu : "VÉRIFIER POUR REGARDER" ;

Voici mes deux lignes jQuery qui utilisent l'idée d'ajouter une classe supplémentaire qui fait spécifiquement référence à cet élément, puis d'ajouter une balise de style (avec une balise importante) pour modifier la valeur CSS du contenu de l'élément sudo :

$("span.play:eq(0)").addClass("G");

$("body").append(".G:before(content:"NewText" !important)");

Pourquoi ajouter des classes ou des attributs quand vous pouvez simplement ajouter du style à la tête

$("head").append(".span:after( content:"contenu modifié" )")

Il existe de nombreuses réponses ici, mais aucune réponse ne permet de manipuler css:before ou:after , pas même celle acceptée.

Voici comment je propose de procéder. Disons que votre code HTML ressemble à ceci :

Test

Et puis vous le définissez : plus tôt dans CSS et vous le concevez comme ceci :

#quelque chose:avant( contenu:"1er"; taille de police:20px; couleur:rouge; ) #quelque chose( contenu:"1er"; )

Notez que j'ai également défini le contenu dans l'élément lui-même afin que vous puissiez facilement le restituer plus tard. Il y a maintenant un bouton sur lequel vous souhaitez changer la couleur : en vert et la taille de la police à 30 pixels. Vous pouvez y parvenir comme ceci :

Définissez CSS avec votre style requis dans certains class.activeS :

ActiveS:avant( couleur:vert !important; taille de police:30px !important; )

Vous pouvez maintenant modifier le : avant le style en ajoutant une classe à votre : avant l'élément comme ceci :

Changer $("#changeBefore").click(function())( $("#something").addClass("activeS"); ));

Si vous souhaitez obtenir le contenu : avant, cela peut être fait comme :

Obtenir le contenu $("#getContent").click(function())( console.log($("#something").css("content"));//affichera "1st" ));

En fin de compte, si vous souhaitez modifier dynamiquement le contenu de : avant d’utiliser jQuery, vous pouvez y parvenir comme ceci :

Changer var newValue = "22";//venant de quelque part var add = "#something:before(content:""+newValue+""!important;)"; $("#changeBefore").click(function())( $("body").append(add); ));

Cliquer sur le bouton "changeBefore" modifiera le contenu :before de #something en "22", qui est une valeur dynamique.

J'espère que cela t'aides

Voici comment accéder : aux propriétés de style after et :before définies en CSS :

// Récupère la valeur de couleur de .element:before var color = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("color"); // Récupère la valeur du contenu de .element:before var content = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("content");

$(".span").attr("data-txt", "foo"); $(".span").click(function () ( $(this).attr("data-txt","tout autre texte"); )) .span( ) .span:after( content: attr(data -SMS); )

On peut également s'appuyer sur des propriétés CSS personnalisées (variables) pour manipuler le pseudo-élément. On peut lire dans le cahier des charges que :

Les propriétés personnalisées sont des propriétés régulières, elles peuvent donc être déclarées sur n'importe quel élément, résolues avec des règles normales d'héritage et de cascade, peuvent être conditionnées par @media et d'autres règles conditionnelles, peuvent être utilisées dans un attribut de style HTML, peuvent être lues ou définies à l'aide de CSSOM. , etc. d.

Compte tenu de cela, l'idée est de définir une propriété personnalisée à l'intérieur de l'élément et le pseudo-élément en hérite simplement ; de cette façon, nous pouvons facilement le changer :

1) Utilisation du style en ligne :

Box:before ( content:"Je suis un élément avant"; color:var(--color, red); font-size:25px; )

2) Utiliser CSS et les classes

Box:before ( content:"Je suis un élément avant"; color:var(--color, red); font-size:25px; ) .blue ( --color:blue; ) .black ( --color:black ; )

3) Utiliser javascript

document.querySelectorAll(".box").style.setProperty("--color", "bleu"); document.querySelectorAll(".box").style.setProperty("--color", "#f0f"); .box:before ( content:"Je suis un élément avant"; color:var(--color, red); font-size:25px; )

4) Utiliser jQuery

$(".box").eq(0).css("--color", "bleu"); /* la fonction css() avec des propriétés personnalisées ne fonctionne qu'avec une version jQuery >= 3.x avec une ancienne version, nous pouvons utiliser l'attribut style pour définir la valeur. Faites simplement attention si vous avez déjà défini un style en ligne ! */ $(".box").eq(1).attr("style","--color:#f0f"); .box:before ( content:"Je suis un élément avant"; color:var(--color, red); font-size:25px; )

Il peut également être utilisé avec des valeurs complexes :

Boîte ( --c:"content"; --b:gradient-linéaire(rouge,bleu); --s:20px; --p:0 15px; ) .box:avant ( contenu: var(--c) ; arrière-plan:var(--b); couleur:#fff; taille de police: calc(2 * var(--s) + 5px); padding:var(--p); )

SI vous souhaitez contrôler complètement les éléments sudo ::before ou ::after via CSS, vous pouvez le faire en JS. Voir ci-dessous:

JQuery("head").append(" /* vos styles ici */ ");

Notez que l'élément possède un identifiant que vous pouvez utiliser pour le supprimer et l'ajouter à nouveau si votre style change dynamiquement.

D'ailleurs, votre élément correspond exactement à ce que vous voulez avec CSS en utilisant JS.

Vous pouvez utiliser mon plugin à cet effet.

(function() ( $.pseudoElements = ( length: 0 ); var setPseudoElement = function(parameters) ( if (typeof settings.argument === "object" || (parameters.argument !== undefined && settings.property ! == non défini)) ( for (var element of settings.elements.get()) ( if (!element.pseudoElements) element.pseudoElements = ( styleSheet : null, avant : ( index : null, propriétés : null ), après : ( index : null, propriétés : null ), id : null ); var selector = (function() ( if (element.pseudoElements.id !== null) ( if (Number(element.getAttribute("data-pe-- id")) !== element.pseudoElements.id) element.setAttribute("data-pe--id", element.pseudoElements.id); return "::" + settings.pseudoElement; ) else ( var id = $ .pseudoElements.length; $.pseudoElements.length++ element.pseudoElements.id = id; element.setAttribute("data-pe--id", id); return "::" + paramètres.pseudoElement; ); ))() ; if (!element.pseudoElements.styleSheet) ( if (document.styleSheets) ( element.pseudoElements.styleSheet = document.styleSheets; ) else ( var styleSheet = document.createElement("style"); document.head.appendChild(styleSheet); element.pseudoElements.styleSheet = styleSheet.sheet; ); ); if (element.pseudoElements.properties && element.pseudoElements.index) ( element.pseudoElements.styleSheet.deleteRule(element.pseudoElements.index); ); if (typeof settings.argument === "object") ( settings.argument = $.extend((), settings.argument); if (!element.pseudoElements.properties && !element.pseudoElements.index) ( var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements.index = newIndex; element.pseudoElements.properties = paramètres.argument; ); var propriétés = ""; for (propriété var dans paramètres.argument) (if (type de paramètres.argument === "fonction") element.pseudoElements.properties = paramètres.argument(); else element.pseudoElements.properties = paramètres. argument; ); for (propriété var dans element.pseudoElements.properties) ( propriétés += propriété + ": " + element.pseudoElements.properties + " !important; "; ); element.pseudoElements.styleSheet.addRule(sélecteur, propriétés , element.pseudoElements.index); ) else if (parameters.argument !== non défini && settings.property !== non défini) ( if (!element.pseudoElements.properties && !element.pseudoElements.index) ( var newIndex = element .pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements.index = newIndex; element.pseudoElements.properties = (); ); if (typeof settings.property === "function") element.pseudoElements.properties = settings.property(); sinon element.pseudoElements.properties = paramètres.property; propriétés var = ""; for (propriété var dans element.pseudoElements.properties) ( propriétés += propriété + ": " + element.pseudoElements.properties + " !important; "; ); element.pseudoElements.styleSheet.addRule(sélecteur, propriétés, element.pseudoElements.index); ); ); return $(parameters.elements); ) sinon si (parameters.argument ! == non défini && paramètres.property === non défini) ( var element = $(parameters.elements).get(0); var windowStyle = window.getComputedStyle(element, "::" + settings.pseudoElement).getPropertyValue(parameters .argument); if (element.pseudoElements) ( return $(parameters.elements).get(0).pseudoElements.properties || windowStyle; ) else ( return windowStyle || null; ); ) else ( console.error(" Valeurs invalides!"); return false; ); ); $.fn.cssBefore = function(argument, propriété) ( return setPseudoElement(( éléments : this, pseudoElement : "avant", argument : argument, propriété : propriété )); ); $.fn.cssAfter = function(argument, propriété) ( return setPseudoElement(( éléments : this, pseudoElement : "after", argument : argument, propriété : propriété )); ); ))(); $(function() ( $(".element").cssBefore("content", ""Nouveau avant!""); )); .element (largeur : 480 px ; marge : 0 auto ; bordure : 2 px rouge uni ; ) .element::before ( contenu : "Ancien avant !"; )

Les valeurs doivent être spécifiées comme dans une fonction jQuery.css classique

De plus, vous pouvez également obtenir la valeur du paramètre du pseudo-élément, tout comme dans une fonction jQuery.css classique :

Console.log($(element).cssBefore(paramètre));

(function() ( document.pseudoElements = ( length: 0 ); var setPseudoElement = function(parameters) ( if (typeof settings.argument === "object" || (parameters.argument !== non défini && settings.property ! == non défini)) ( if (!parameters.element.pseudoElements) settings.element.pseudoElements = ( styleSheet : null, avant : ( index : null, propriétés : null ), après : ( index : null, propriétés : null ), id: null ); var selector = (function() ( if (parameters.element.pseudoElements.id !== null) ( if (Number(parameters.element.getAttribute("data-pe--id")) != = paramètres.element.pseudoElements.id) paramètres.element.setAttribute("data-pe--id", paramètres.element.pseudoElements.id); return "::" + paramètres.pseudoElement; ) else ( var id = document .pseudoElements.length; document.pseudoElements.length++ settings.element.pseudoElements.id = id; settings.element.setAttribute("data-pe--id", id); return "::" + settings.pseudoElement; ); ))(); if (!parameters.element.pseudoElements.styleSheet) ( if (document.styleSheets) ( settings.element.pseudoElements.styleSheet = document.styleSheets; ) else ( var styleSheet = document.createElement("style"); document.head.appendChild(styleSheet); settings.element.pseudoElements.styleSheet = styleSheet.sheet; ); ); if (parameters.element.pseudoElements.properties && settings.element.pseudoElements.index) ( settings.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements.index); ); if (typeof settings.argument === "object") ( settings.argument = (function() ( var cloneObject = typeof settings.argument.pop === "function" ? : (); for (var propriété dans les paramètres. argument) ( cloneObject = paramètres.argument; ); return cloneObject; ))(); if (!parameters.element.pseudoElements.properties && !parameters.element.pseudoElements.index) ( var newIndex = settings.element.pseudoElements.styleSheet .rules.length || paramètres.element.pseudoElements.styleSheet.cssRules.length || paramètres.element.pseudoElements.styleSheet.length; paramètres.element.pseudoElements.index = newIndex; paramètres.element.pseudoElements.properties = paramètres.argument ; ); var propriétés = ""; for (propriété var dans paramètres.argument) (if (type de paramètres.argument === "fonction") paramètres.element.pseudoElements.properties = paramètres.argument(); sinon paramètres.element .pseudoElements.properties = paramètres.argument; );for (propriété var dans paramètres.element.pseudoElements.properties) ( propriétés += propriété + ": " + paramètres.element.pseudoElements.properties + " !important; "; ); paramètres.element.pseudoElements.styleSheet.addRule(sélecteur, propriétés, paramètres.element.pseudoElements.index); ) sinon si (paramètres.argument ! == non défini && paramètres.property !== non défini) ( if (!parameters.element.pseudoElements.properties && !parameters.element.pseudoElements.index) ( var newIndex = paramètres.element.pseudoElements.styleSheet.rules.length || paramètres.element.pseudoElements.styleSheet.cssRules.length || paramètres.element.pseudoElements.styleSheet.length; paramètres.element.pseudoElements.index = newIndex; paramètres.element.pseudoElements.properties = (); ); if (type de paramètres .property === "fonction") paramètres.element.pseudoElements.properties = paramètres.property(); sinon paramètres.element.pseudoElements.properties = paramètres.property; var propriétés = ""; pour (propriété var dans paramètres.élément .pseudoElements.properties) ( propriétés += propriété + ": " + paramètres.element.pseudoElements.properties + " !important; "; ); paramètres.element.pseudoElements.styleSheet.addRule(sélecteur, propriétés, paramètres.element.pseudoElements .index); ); ) sinon if (parameters.argument !== non défini && settings.property === non défini) ( var windowStyle = window.getComputedStyle(parameters.element, "::" + settings.pseudoElement).getPropertyValue(parameters.argument); if (parameters.element.pseudoElements) ( return settings.element.pseudoElements.properties || windowStyle; ) else ( return windowStyle || null; ); ) else ( console.error("Valeurs invalides!"); return false; ); ); Object.defineProperty(Element.prototype, "styleBefore", ( enumerable: false, value: function(argument, property) ( return setPseudoElement(( element: this, pseudoElement: "before", argument: argument, property: property )); ) )); Object.defineProperty(Element.prototype, "styleAfter", ( enumerable: false, value: function(argument, property) ( return setPseudoElement(( element: this, pseudoElement: "after", argument: argument, property: property )); ) )); ))(); document.querySelector(".element").styleBefore("content", ""Nouveau avant!""); .element (largeur : 480 px ; marge : 0 auto ; bordure : 2 px rouge uni ; ) .element::before ( contenu : "Ancien avant !"; )

Maintenant, dans mon cas, je devais définir la hauteur de l'élément before en fonction de la hauteur de l'autre et elle changera une fois redimensionnée, donc avec cela, je peux exécuter setHeight() à chaque fois que la fenêtre est redimensionnée et elle remplacera le .

J'espère que cela aidera quelqu'un qui est coincé à essayer de faire de même.

Dans cette leçon, nous parlerons de l'effet dans lequel l'arrière-plan d'un objet change en douceur lorsque vous passez le curseur de la souris dessus.
Tout d’abord, comme vous y êtes probablement déjà habitué (si ce n’est pas la première fois que vous utilisez la bibliothèque jQuery), nous connectons jQuery à notre site.
En plus de jQuery lui-même, nous avons également besoin de jQuery UI.

Si vous connaissez les principes de jQuery, n'oubliez pas que dans l'en-tête, nous devons placer le code d'appel, dans ce cas, l'animation de changement de couleur, afin qu'il se charge avant le chargement du contenu principal de la page. $(document).ready(function() ( // mettez votre code d'appel d'animation ici ));

HTML

Voici un exemple de balisage HTML.

Changer la couleur de fond d'un élément Animation de changement de couleur au survol / Jeux PC / Portal 2 Portail 2

Le Portal original est déjà un objet culte et inattendu pour l'époque. Cela ne fait que confirmer une fois de plus la thèse éprouvée du triomphe des idées sur les technologies avancées.

CSS

Les styles CSS de notre page ressemblent à ceci.

png); texte-align:gauche; couleur : #333 ; largeur : 800 px ; taille de police : 14 px ; font-family:georgia, "time new romances", serif ; marge : 0 automatique ; remplissage : 0 ; ) a( couleur : #333 ; décoration de texte : aucun ) a : focus ( contour : aucun ; ) h1 ( taille de police : 34 px ; famille de polices : verdana, helvetica, arial, sans-serif ; espacement des lettres : - 2px ; couleur : #394BEA ; poids de la police : 700 ; remplissage : 20px 0 0 ; ombre du texte : 0 1px 1px #70C5ED ; ) h2 (taille de la police : 24 px ; famille de polices : verdana, helvetica, arial, sans- serif ; couleur : #5C81CB ; poids de la police : 400 ; remplissage : 0 0 10px ; ombre du texte : 0 1px 1px #70C5ED ; ) h3, h3 a( taille de la police : 14px ; famille de polices : verdana, helvetica, arial , sans empattement ; espacement des lettres : -1 px ; couleur : #333 ; poids de la police : 700 ; transformation du texte : majuscules ; marge : 0 ; remplissage : 8px 0 8px 0 ; ) p ( couleur : #333 ; float : gauche; hauteur de ligne:22px; marge:5px; remplissage:0 0 10px; ) #container (marge: 0; remplissage: 0; ) .boxes ( background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; ) img ( border:5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width: 100 % ; ) .block (couleur : #0066CC ; flotteur : gauche ; débordement caché; position : relative ; largeur : 600 px ; ) .block h4, .block h4 a( couleur:#333333; taille de police:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:majuscule; )

JS

Un élément DIV avec la classe .boxes est l'élément, le bloc, dont on veut changer la couleur.
C'est le code que nous appellerons dans l'en-tête.

$(document).ready(function())( $(".boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); Les paramètres backgroundColor définissent la couleur et la valeur 800 est la vitesse d'animation.

Aujourd'hui, nous allons apprendre à modifier en douceur la couleur d'un bloc en utilisant CSS et JQuery. Avec ce plugin, vous pouvez obtenir des résultats de conception incroyablement beaux. Par exemple, vous pouvez créer un menu sympa qui changera de couleur en douceur au survol, et croyez-moi, il est très beau.

JQuery

Pour commencer, entre les balises et vous devez mettre ce qui suit :

Puis, toujours entre les balises, on copie ce script :

$(document).ready(function())( $(".Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500"), 400); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 400); )); ));

Où .Box est la classe de bloc que nous avons proposée ci-dessus en CSS.

"#FF4500" - couleur de survol. 400 — vitesse d'animation en survol.

« #ffffff » est la couleur initiale après avoir éloigné le curseur. 400 — vitesse d'animation lors de l'éloignement du curseur.

HTML

Après avoir tout fait comme écrit ci-dessus, la couleur du bloc changera progressivement. Pour insérer un tel bloc sur la page, il vous suffit d'ajouter ce qui suit au bon endroit :

Et le bloc apparaîtra.

Important

Ce plugin ne peut changer que la couleur d'arrière-plan. Par exemple, vous ne pourrez pas le joindre à des liens ou à du texte. Un autre plugin change la couleur des liens (j'écrirai certainement comment le faire bientôt).

Si vous souhaitez que les blocs de la page aient des couleurs différentes, comme le mien, vous devrez placer plusieurs scripts d'affilée entre les balises et, par conséquent, n'oubliez pas de changer la couleur pour celle souhaitée. La chose la plus importante est de changer de classe, par exemple dans notre exemple ci-dessus - la classe Box, et le script suivant doit être avec une classe différente, par exemple Box1, puis Box2 et ainsi de suite.

C'est tout, chers amis. Si vous ne comprenez rien, n'hésitez pas à demander dans les commentaires. À bientôt.

Pour modifier dynamiquement les propriétés dans jQuery, utilisez la fonction animer. Il vous permet de définir une nouvelle valeur de propriété et la durée pendant laquelle un changement animé en douceur de l'ancienne valeur à celle spécifiée se produira. Fonctionnalité très puissante ! Mais comme d’habitude, il y a un problème.

Problème

L’ensemble des propriétés CSS avec lesquelles les travaux d’animation sont limités. En fait, ce ne sont que les propriétés pouvant prendre des valeurs numériques. En particulier, l'animation ne peut pas fonctionner avec la couleur.

Solution

Heureusement, il existe un plugin qui étend les capacités d'Animate et le rend encore plus puissant. S'il vous plaît, aimez et favorisez - jQuery.color ! Avec son aide, vous pouvez ajouter , et à la liste des propriétés CSS animées compréhensibles.

En pratique, cela ressemble à ceci : .

Testé dans :

• IE 6-8
• Firefox 3
• Opéra 9.5-10
• Safari 3

Que télécharger ?

• jquery.js (55,9 Ko) - bibliothèque jQuery version 1.3.2 ;
• (3,66 Ko).

Départ rapide

Connectez jQuery et le plugin :

En CSS, nous définissons explicitement la couleur de départ :

Div( couleur d'arrière-plan :#0CF; )

Maintenant, nous utilisons la fonction animer, par exemple au survol de la souris :

jQuery(document).ready(function())( jQuery("div").mouseenter(function () ( jQuery(this).animate(( backgroundColor:"#03C", ), 500); )); jQuery( " div").mouseleave(function() ( jQuery(this).animate(( backgroundColor:"#0CF", ), 500); )); ));

Et maintenant plus en détail

Le plugin vous permet de travailler avec les propriétés CSS suivantes :

Exemple : Plus :

• l'utilisation d'une classe fournit un mécanisme plus flexible que la simple fonction d'animation. Après tout, ici, nous ne sommes pas limités dans le choix de propriétés changeantes simultanément.

Moins:

• Une méthode assez « lourde » - les bibliothèques pèsent assez cher.

Conclusions :

Si vous avez besoin d’effets plus complexes que ceux que l’animation peut fournir, vous pouvez utiliser l’effet switchClass de l’ensemble de l’interface utilisateur. Mais si la tâche se limite à des changements de couleur fluides, utilisez le plugin jQuery.color plus léger.

JQuery.color rend ma fonction d'animation préférée encore meilleure. J’ai vraiment aimé le fait qu’il n’ajoute aucune classe ou identifiant supplémentaire. Élargit simplement les nombreuses options possibles d'animation. Utilisez tout pour créer un bel effet de changements de couleurs fluides !

D'une manière ou d'une autre, confronté à la nécessité d'écrire l'effet d'un texte passant d'une couleur à une autre, j'ai découvert de manière inattendue que ce n'était pas une tâche si triviale.

Vous pouvez laisser une coche uniquement en face d’Effets Core. C'est de ce module qui étend la méthode jQuery.animate() dont nous avons besoin ; il vous suffit de connecter l'assembly téléchargé :

Après cela, la couleur du texte, du cadre ou de l'arrière-plan de n'importe quel élément de page est disponible pour l'animation.

Étape 2. Délai entre les animations des éléments.

Maintenant que tout est en ordre avec l'animation, il existe une deuxième fonctionnalité qui complique la tâche : ajouter un délai entre l'animation des éléments de la collection.

Disons que nous avons une collection d'éléments de liste numérotés :

Var $elements = $("ol > li");

L'animation de chaque élément suivant de la collection doit commencer avec un certain retard par rapport au précédent.

Vous pouvez obtenir le résultat souhaité en utilisant le code suivant :

Pour (var je = 0; je

Notez que setTimeout() prend comme premier paramètre une fonction qui renvoie une autre fonction.

Si cela n'est pas fait, alors la variable i sera passée par référence et quand viendra le temps d'exécuter la fonction timer, j'aurai sa dernière valeur égale à $elements.length , car à ce moment la boucle for sera terminée et l'animation ne sera pas exécutée du tout.

A l'aide d'une fonction imbriquée, on copie ainsi la valeur de i à chaque itération de la boucle, à l'aide de laquelle on obtient le bon fonctionnement du plan.

conclusions

Vous pouvez utiliser une telle animation, par exemple, pour montrer que dans une liste de paramètres, vous devez en sélectionner au moins un, ou simplement pour attirer l'attention sur un bloc de la page.