Je voudrais implémenter quelque chose de similaire à l' effet Yellow Fade de 37Signals.
J'utilise Jquery 1.3.2
Le code
(function($) {
$.fn.yellowFade = function() {
return (this.css({backgroundColor: "#ffffcc"}).animate(
{
backgroundColor: "#ffffff"
}, 1500));
}
})(jQuery);
et le prochain appel affiche le jaune fondu l'élément DOM avec l' ID de boîte .
$("#box").yellowFade();
Mais cela ne fait que le jaune. Pas de fond blanc après 15 000 millisecondes.
Une idée pourquoi cela ne fonctionne pas?
Solution
Vous pouvez utiliser:
$("#box").effect("highlight", {}, 1500);
Mais vous devrez inclure:
Réponses:
Cette fonction fait partie de jQuery effects.core.js :
Comme l'a souligné Steerpike dans les commentaires, les effets.core.js et les effets.highlight.js doivent être inclus pour pouvoir l'utiliser.
la source
J'ai adoré la réponse de Sterling Nichols, car elle était légère et ne nécessitait pas de plugin. Cependant, j'ai découvert que cela ne fonctionnait pas avec des éléments flottants (c'est-à-dire quand l'élément est "float: right"). J'ai donc réécrit le code pour afficher correctement la surbrillance quelle que soit la position de l'élément sur la page:
Facultatif:
utilisez le code suivant si vous souhaitez également faire correspondre le rayon de la bordure de l'élément:
la source
La bibliothèque d'effets jQuery ajoute un peu de surcharge inutile à votre application. Vous pouvez accomplir la même chose avec jQuery uniquement. http://jsfiddle.net/x2jrU/92/
la source
.width(el.outerWidth())
et.height(el.outerHeight())
pour mettre en évidence l'ensemble de mes champs de formulaire.Définissez votre CSS comme suit:
Et ajoutez simplement la classe
yft
à n'importe quel élément$('.some-item').addClass('yft')
Démo: http://jsfiddle.net/Q8KVC/528/
la source
Devrait faire l'affaire. Réglez-le sur le jaune, puis fondez-le en blanc
la source
Je viens de résoudre un problème similaire à celui-ci sur un projet sur lequel je travaillais. Par défaut, la fonction animer ne peut pas animer les couleurs. Essayez d'inclure des animations couleur jQuery .
Toutes les réponses ici utilisent ce plugin mais personne ne le mentionne.
la source
En fait, j'ai une solution qui ne nécessite que jQuery 1.3x, et aucun plugin supplémentaire.
Tout d'abord, ajoutez les fonctions suivantes à votre script
Ensuite, appelez la fonction en utilisant ceci:
Je vous laisse deviner les paramètres, ils sont assez explicites. Pour être honnête, le script ne vient pas de moi, je l'ai pris sur une page puis je l'ai changé pour qu'il fonctionne avec le dernier jQuery.
NB: testé sur firefox 3 et ie 6 (oui ça marche aussi sur ce vieux truc)
la source
La ligne
this.style.removeAttribute('filter')
est pour un bogue d'anti-aliasing dans IE.Maintenant, appelez YellowFade de n'importe où et passez votre sélecteur
Crédit : Phil Haack avait une démo montrant exactement comment faire cela. Il faisait une démo sur JQuery et ASPNet MVC.
Regarde cette vidéo
Mise à jour : avez-vous regardé la vidéo? Oublié de mentionner cela nécessite le plugin JQuery.Color
la source
J'ai détesté ajouter 23 Ko juste pour ajouter des effets.core.js et des effets.highlight.js, alors j'ai écrit ce qui suit. Il émule le comportement en utilisant fadeIn (qui fait partie de jQuery lui-même) pour `` flasher '' l'élément:
puis appelez-le avec $ ('. item'). faderEffect ();
la source
c'est ma solution au problème. cela fonctionne très bien. il passe la validation d'erreur jslint et fonctionne également correctement dans IE8 et IE9. Bien sûr, vous pouvez le modifier pour accepter les codes de couleur et les rappels:
la source
Il s'agit d'une option non jQuery que vous pouvez utiliser pour l'effet de fondu de couleur. Dans le tableau "couleurs", vous ajoutez les couleurs de transition dont vous avez besoin de la couleur initiale jusqu'à la dernière couleur. Vous pouvez ajouter autant de couleurs que vous le souhaitez.
la source
Si vous souhaitez essayer une autre technique de fondu jaune qui ne dépend pas de jQuery UI .effect, vous pouvez placer un div jaune (ou d'une autre couleur) derrière votre contenu et utiliser jQuery .fadeOut ().
http://jsfiddle.net/yFJzn/2/
la source
J'ai simplement utilisé ...
la source
Un script simple / brut pour un "fondu jaune", pas de plugins sauf jquery lui-même . Juste définir l'arrière-plan avec RVB (255,255, couleur de surbrillance) dans une minuterie:
la source
VOUS N'AVEZ BESOIN QUE DE HTML POUR LE FAIRE. Aucun CSS ou JS requis!
Supposons que vous ayez un texte sur une certaine page que vous souhaitez temporairement "mettre en évidence et montrer" aux utilisateurs lors de la visite de la page.
Et laissez le contenu de cette page être mis en surbrillance comme une balise h2 et un contenu de balise ap comme indiqué ci-dessous:
Ci-dessous: un lien qui mettra VRAIMENT en évidence le contenu présenté ci-dessus. Chaque fois qu'un utilisateur clique sur ce lien ... il est redirigé vers la page au même endroit où se trouve le contenu, et le texte est également mis en évidence!
la source