Aujourd'hui, nous allons apprendre à faire changement de couleur de bloc en douceur avec 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 joli.

jQuery

Pour commencer entre les balises et tu dois mettre ce qui suit :

Puis à nouveau entre les balises et copiez ce script :

Où .boîte- c'est la classe de bloc que nous avons trouvée ci-dessus en CSS.

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

"#ffffff"— couleur initiale après suppression du curseur. 400 - vitesse d'animation lorsque le curseur est retiré.

HTML

Après avoir tout fait comme décrit ci-dessus, la couleur du bloc changera en douceur. 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 de fond (fond). Par exemple, il ne sera pas possible de l'attacher à des liens ou à du texte. La couleur des liens est modifiée par un autre plugin (j'écrirai certainement comment le faire bientôt).

Si vous voulez que les blocs de la page aient des couleurs différentes, comme je l'ai fait dans , vous aurez besoin entre les balises et mettez plusieurs scripts à la suite et, en conséquence, n'oubliez pas de changer la couleur en celle souhaitée. La chose la plus importante est de changer la classe, par exemple, dans notre exemple ci-dessus - la classe boîte, et le script suivant doit appartenir à une classe différente, comme Boîte1, alors Boîte2 etc.

Voilà, chers amis. Si vous ne comprenez pas quelque chose, assurez-vous de demander dans les commentaires. À bientôt.

Il y a un calque avec du texte et un bouton, lorsque vous cliquez dessus, vous devez changer la couleur du texte pour ce calque.

Pour modifier dynamiquement les propriétés, jQuery utilise la fonction animate. Il vous permet de définir une nouvelle valeur -propriétés et temps, pendant laquelle il y aura un changement animé en douceur de l'ancienne valeur à celle donnée. Une fonctionnalité très puissante ! Mais, comme d'habitude, il y a aussi une mouche dans la pommade.

Problème

L'ensemble de propriétés CSS avec lesquelles animer fonctionne est limité. En fait, ce ne sont que les propriétés qui peuvent prendre des valeurs numériques. En particulier, l'animation ne peut pas fonctionner avec la couleur.

La solution

Heureusement, il existe un plugin qui étend les capacités d'animation et le rend encore plus puissant. Veuillez aimer et respecter jQuery.color ! Avec lui, vous pouvez ajouter , et à la liste des propriétés CSS animées compréhensibles.

En pratique ça ressemble à ça :

Vérifié en :

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

Quoi télécharger ?

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

Départ rapide

Connectez jQuery et plugin :

Nous définissons explicitement la couleur initiale en CSS :

Div( background-color:#0CF; )

Maintenant, nous utilisons la fonction animate, par exemple, lors du survol de la souris :

Et maintenant plus en détail

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

Exemple:

Un plus:

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

Moins:

• méthode plutôt "lourde" - les bibliothèques pèsent décemment.

Conclusion :

Si vous avez besoin d'effets plus complexes que l'animation "pulls", vous pouvez utiliser l'effet switchClass de l'ensemble d'interface utilisateur. Mais si la tâche se limite à un changement de couleur en douceur, 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 pas de classes ou d'identifiants supplémentaires. Il élargit simplement les nombreuses options possibles pour l'animation. Utilisez tout cela pour créer un bel effet de changement de couleur lisse !

Existe-t-il un moyen de sélectionner/manipuler des pseudo-éléments CSS comme :: avant et :: après (et ancienne version avec un point-virgule) en utilisant jQuery ?

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

Span::after( content:"foo" )

Comment changer "foo" en "bar" avec 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 de votre choix"; )

Si vous voulez que "autre texte" ne soit pas affiché, 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 de votre choix"; )

Ce n'est pas pratique car je ne l'ai pas écrit pour une utilisation dans le monde réel, juste pour vous donner un exemple de ce qui peut être réalisé.

Css = ( avant : function(elem,attr)( if($("#cust_style") !== undefined)( $("body").append(""); ) else ( $("#cust_style").remove(); $("body").append(""); ) ), après : function(elem,attr)( if($("#cust_style") !== undefined)( $("body").append(""); ) else ( $("#cust_style").remove(); $("body").append(""); } } }

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.before(...); // pour affecter le pseudo-élément avant.

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

mon chemin n'était qu'un exemple et ce n'est pas bon pour la pratique, vous pouvez le changer, essayer quelques-uns de vos propres trucs et l'adapter à une utilisation dans le monde réel.

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

accueille - Adarsh ​​​​Hedde.

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é de la div externe soit différente de l'opacité de la div interne et cela change en cliquant ailleurs ;) Merci !

$("#ena").on("click", function () ( $("head").append(""); )); $("#duop").on("clic", fonction (e) ( $("tête").append(""); e.stopPropagation(); )); #ena( width:300px; height:300px; border:1px black solid; position:relative; ) #duo( opacity:1; position:absolute; top:50px; width :300px; hauteur:100px; background-color:white; ) #ena:before ( content: attr(data-before); color: white; curseur: pointeur; position: absolue; background-color:red; opacity:0.9; largeur : 100 % ; hauteur : 100 % ; )

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 = switched ? "red" : "darkred"; var element = document.getElementById("arrow"); element.style.backgroundColor = color; // Gestion du pseudo-élément "s css // en utilisant l'héritage. element.style.borderLeftColor = color; switched = !switched; ), 1000); .arrow ( /* SET FICTIONAL PROPERTY */ border-left-color:red; background-color:red; width:1em; height:1em; display:inline-block; position:relative; ) .arrow:after ( border-top:1em solide transparent; border-right:1em solide transparent; border-bottom:1em solide transparent; border- left:1em solid transparent; /* INHERIT PROPERTY */ border-left-color:inherit; content:""; width:0; height:0; position:absolute; left:100%; top:-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 parent et contrôler ses pseudo-éléments en CSS.

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

Bien qu'ils soient rendus par les navigateurs via CSS comme s'ils étaient similaires à d'autres réels Éléments 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 donc vous ne pouvez pas les sélectionner et les manipuler directement avec jQuery (ou n'importe quel API JavaScript, sinon vraiment API des sélecteurs). Cela s'applique à tous les pseudo-éléments que vous essayez de styliser avec le script, pas seulement ::before et ::after .

Vous ne pouvez obtenir que des styles de pseudo-éléments directement au moment de l'exécution via le 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 cela, par exemple :

un qui fonctionne, mais pas très méthode efficace- ajouter une règle au document avec un nouveau contenu et y faire référence avec une classe. selon ce qui est nécessaire, la classe peut exiger un identifiant unique pour chaque valeur du contenu.

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

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

La réponse doit être Oui & Pas. Vous ne pouvez pas sélectionner un élément avec un pseudo sélecteur, mais vous pouvez ajouter une nouvelle règle à la feuille de style avec 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"");

Le style calculé dans "before" était contenu : "VERIFY TO WATCH" ;

Voici mes deux lignes de jQuery utilisant l'idée d'ajouter une classe supplémentaire qui référence spécifiquement cet élément, puis d'ajouter une balise de style (avec une balise importante) pour changer Valeurs CSS contenu de l'élément sudo :

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

$("corps").append("");

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

$("tête").append("")

Il y a beaucoup de réponses ici, mais aucune réponse n'aide à manipuler css:before ou :after , pas même celle acceptée.

Voici comment je suggère de le faire. Disons que votre HTML ressemble à ceci :

Et puis vous le définissez : avant en CSS et le concevez comme ceci :

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

Notez que j'ai également défini le contenu sur l'élément lui-même afin que vous puissiez facilement le retirer plus tard. Maintenant, il y a un bouton sur lequel vous voulez changer la couleur en vert et sa taille de police en 30px. Vous pouvez y parvenir comme ceci :

Définissez css avec votre style requis dans une classe .activeS :

ActiveS:before( couleur:vert !important; font-size:30px !important; )

Vous pouvez maintenant changer le style :before en ajoutant une classe à votre élément :before comme ceci :

monnaie

Si vous voulez obtenir du contenu : avant que cela puisse être fait, comme :

Obtenir du contenu

En fin de compte, si vous souhaitez modifier dynamiquement le contenu :before avec jQuery, vous pouvez le faire comme ceci :

monnaie

Cliquer sur le bouton "changeBefore" changera le contenu : avant 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 aussi compter sur propriétés CSS personnalisées (variables) pour manipuler le pseudo-élément. On peut lire dans Caractéristiques, Quel:

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, autorisées avec des règles d'héritage et de cascade normales, peuvent être conditionnelles à @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.

Dans cet esprit, 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 ; donc 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) Utilisation de CSS et de 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", "blue"); 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", "blue"); /* la fonction css() avec des propriétés personnalisées ne fonctionne qu'avec une version jQuery >= 3.x avec une version plus ancienne, 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 :

Box ( --c:"content" ; --b:linear-gradient(red,blue); --s:20px; --p:0 15px; ) .box:before (contenu : var(--c) ; background:var(--b); color:#fff; font-size: calc(2 * var(--s) + 5px); padding:var(--p); )

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

jQuery("tête").append("");

Veuillez noter que l'élément