L'effet d'un flux de couleur alterné. Jquery changement de couleur d'arrière-plan en douceur changement de couleur en douceur

L'idée est très simple et directe... Supposons que nous voulions changer la couleur de fond de la page tous les 500px à partir du haut. Malheureusement, il n'a pas été possible de trouver une version simple prête à l'emploi pouvant être mise à niveau. Par conséquent, avec @only_darkangel, une version élémentaire a été écrite :

Tout d'abord, incluons les bibliothèques dans head, si elles ne le sont pas déjà.

Puis quelques lignes de styles

Vient ensuite un script qui changera la couleur de la page lors du défilement.
Le nombre 400 définit la vitesse de changement de couleur (0,4 seconde). Tout en bas, le nombre 451 définit le temps de vérification de la position du scroll, ce chiffre doit toujours être supérieur au temps de vitesse de couleur.

DÉMO travail de scénario. Comme vous pouvez le voir, tout est extrêmement simple et compréhensible, mais en même temps, primitif.

J'ai aussi trouvé une option qui est plus belle, mais aussi difficile. http://jsfiddle.net/jguffey/mxkx9j2o/ peut également être utile.

Posez des questions dans les commentaires, partagez l'article sur les réseaux sociaux. réseaux en cliquant sur le bouton correspondant ci-dessous Merci d'avoir lu !

Il y a un calque avec du texte et un bouton lorsque vous cliquez sur lequel vous devez changer la couleur du texte de ce calque.

D'une manière ou d'une autre, face à la nécessité d'écrire l'effet du texte qui passe d'une couleur à l'autre, j'ai soudainement découvert par moi-même que ce n'était pas une tâche si triviale.

Vous ne pouvez laisser qu'une coche ci-contre Noyau d'effets... C'est ce module qui étend la méthode jQuery.animate() dont nous avons besoin, il suffit de connecter l'assembly téléchargé :

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

Étape 2. Délai entre l'animation des éléments.

Maintenant que tout est en ordre avec l'animation, il y a une deuxième fonctionnalité qui complique la tâche - faire un délai entre l'animation des éléments de 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 devrait commencer avec un certain délai après le précédent.

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

Pour (var i = 0; je

Notez que dans setTimeout(), le premier paramètre est 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 le moment sera venu pour la fonction timer de s'exécuter, j'aurai sa dernière valeur égale à $ elements.length, car à ce moment la boucle for est déjà terminée et l'animation ne sera pas réalisée du tout.

En utilisant la fonction imbriquée, nous copions ainsi la valeur de i à chaque itération de la boucle, à l'aide de laquelle nous réalisons le travail correct du conçu.

conclusions

Une telle animation peut être utilisée, par exemple, pour montrer que dans toute liste de paramètres, il est nécessaire d'en sélectionner au moins un, ou simplement pour attirer l'attention sur un certain bloc de la page.

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

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

Span :: après (contenu : "foo")

Comment puis-je changer "foo" en "bar" à l'aide de jQuery ?

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

Foo

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

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

Si vous voulez que "l'autre texte" ne soit pas affiché, vous pouvez le combiner avec la solution de seucolega comme ceci :

Foo

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

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

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

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

cet ajout ajoute ou ajoute actuellement 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.

à la fois 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.

mon chemin n'était qu'un exemple et pas très bon pour la pratique, vous pouvez le changer, essayer certains de vos propres trucs et le faire bien pour une utilisation dans le monde réel.

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

salue - Adarsh ​​Hedde.

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

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

$ ("# ena"). on ("click", function () ($ ("head"). append ("");)); $ (" # duop "). sur (" click ", fonction (e) ($ (" head "). append (""); e.stopPropagation ();)); #ena (largeur : 300px ; hauteur : 300px ; bordure : 1px solide noir ; position : relative ;) #duo (opacité : 1 ; position : absolue ; haut : 50px; largeur : 300px; hauteur: 100px; background-color: white;) #ena: before (content: attr (data-before); couleur: blanc; curseur: pointeur; position: absolue; background-color: rouge; opacité: 0.9; largeur : 100 % ; hauteur : 100 % ;)

Vous pouvez créer une fausse propriété ou utiliser une propriété 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 // en utilisant l'héritage. element.style.borderLeftColor = couleur; commuté =! commuté;), 1000); .arrow (/ * FIXER LA PROPRIÉTÉ FICTIONNELLE * / border-left-color: red; background-color: red; largeur : 1 em ; hauteur : 1 em ; affichage : bloc en ligne ; position : relative ;) .flèche : après (bordure supérieure : 1 em solide transparent ; bordure-droite : 1 em solide transparent ; bordure inférieure : 1em solide transparent ; bordure- gauche : 1em solide transparent ; / * INHERIT PROPERTY * / 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.

Span.change : après (contenu : "bar")

Bien qu'ils soient rendus par les navigateurs via CSS comme s'ils étaient comme 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 donc vous ne pouvez pas sélectionner et manipuler directement en utilisant jQuery (ou quelconque API JavaScript, sinon vraiment API de sélecteurs). Cela s'applique à tous les pseudo-éléments que vous essayez de styliser avec un script, pas seulement :: avant et :: après.

Vous ne pouvez obtenir des styles de pseudo-éléments que directement à l'exécution via CSSOM (pensez à window.getComputedStyle ()), qui n'est pas exposé par 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 chemins autour, mais pour un exemple :

un moyen efficace mais peu efficace consiste à ajouter une règle au document avec un nouveau contenu et à le référencer avec une classe. selon ce qui est nécessaire, la classe peut exiger un identifiant unique pour chaque valeur dans le contenu.

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

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

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

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

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

Le style calculé dans "avant" é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 modifier la valeur CSS du contenu de l'élément sudo :

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

$ ("corps"). ajouter ("");

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

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

Il y a beaucoup de réponses ici, mais aucune réponse ne permet de manipuler les css : avant ou : après même pas accepté.

C'est ainsi que je propose de procéder. Supposons que votre code HTML ressemble à ceci :

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

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

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

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

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

Maintenant, vous pouvez changer le : devant le style en ajoutant une classe à votre : devant l'élément comme ceci :

Changer

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

Obtenir du contenu

Au final, si vous souhaitez modifier dynamiquement le contenu de : avant d'utiliser jQuery, vous pouvez le réaliser comme ceci :

Changer

Cliquer sur le bouton "changeBefore" changera le : avant le contenu de #quelquechose en "22", qui est une valeur dynamique.

J'espère que cela t'aides

Voici un moyen d'y accéder : après et : avant les propriétés de style définies en css :

// Récupère la valeur de couleur de .element : avant var color = window.getComputedStyle (document.querySelector (". Element"), ": before"). GetPropertyValue ("color"); // Récupère la valeur de contenu de .element : avant 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 s'appuyer sur propriétés CSS personnalisées (variables) pour manipuler le pseudo-élément. On peut lire dans Caractéristiques, quelle:

Les propriétés personnalisées sont des propriétés normales, 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 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.

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 ; de cette façon, nous pouvons facilement le changer:

1) Utilisation du style en ligne :

Boîte : avant (contenu : "Je suis un élément avant" ; couleur : var (- couleur, rouge); taille de police : 25px ;)

2) Utilisation de CSS et de classes

Boîte : avant (contenu : « Je suis un élément avant » ; couleur : var (- couleur, rouge) ; taille de police : 25px ;) .blue (--color : bleu ;) .black (--color : noir ; )

3) Utiliser javascript

document.querySelectorAll (". box"). style.setProperty ("- color", "blue"); document.querySelectorAll (". box"). style.setProperty ("- color", "# f0f"); .box : avant (contenu : "Je suis un élément avant" ; couleur : var (- couleur, rouge ); taille de police : 25px ;)

4) Utilisation de 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 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 : avant (contenu : "Je suis un élément avant" ; couleur : var (- couleur, rouge ); taille de police : 25px ;)

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

Box (--c: "content"; --b: linear-gradient (rouge, bleu); --s: 20px; --p: 0 15px;) .box: before (content: var (-c) ; arrière-plan : var (- b); couleur : #fff ; taille de police : calc (2 * var (- s) + 5px ; remplissage : var (- p);)

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

JQuery ("tête"). Ajouter ("");

Notez que l'élément