Effet de fondu jaune avec JQuery

Cette fonction fait partie de jQuery effects.core.js :

 $("#box").effect("highlight", {}, 1500); 

Comme Steerpike l’a souligné dans les commentaires, Effects.core.js et effects.highlight.js doivent être inclus pour pouvoir l’utiliser.

La bibliothèque d’effets jQuery ajoute un peu de temps libre à votre application. Vous pouvez accomplir la même chose avec jQuery uniquement. http://jsfiddle.net/x2jrU/92/

 jQuery.fn.highlight = function() { $(this).each(function() { var el = $(this); el.before("
") el.prev() .width(el.width()) .height(el.height()) .css({ "position": "absolute", "background-color": "#ffff99", "opacity": ".9" }) .fadeOut(500); }); } $("#target").highlight(); 

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 qu’il ne fonctionnait pas avec des éléments flottants (par exemple lorsque l’élément est “float: right”). J’ai donc réécrit le code pour afficher correctement la surbrillance, peu importe la position de l’élément sur la page:

 jQuery.fn.highlight = function () { $(this).each(function () { var el = $(this); $("
") .width(el.outerWidth()) .height(el.outerHeight()) .css({ "position": "absolute", "left": el.offset().left, "top": el.offset().top, "background-color": "#ffff99", "opacity": ".7", "z-index": "9999999" }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); }); }); } 

Optionnel:
Utilisez le code suivant si vous souhaitez également faire correspondre le rayon de bordure de l’élément:

 jQuery.fn.highlight = function () { $(this).each(function () { var el = $(this); $("
") .width(el.outerWidth()) .height(el.outerHeight()) .css({ "position": "absolute", "left": el.offset().left, "top": el.offset().top, "background-color": "#ffff99", "opacity": ".7", "z-index": "9999999", "border-top-left-radius": parseInt(el.css("borderTopLeftRadius"), 10), "border-top-right-radius": parseInt(el.css("borderTopRightRadius"), 10), "border-bottom-left-radius": parseInt(el.css("borderBottomLeftRadius"), 10), "border-bottom-right-radius": parseInt(el.css("borderBottomRightRadius"), 10) }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); }); }); } 

 (function($) { $.fn.yellowFade = function() { this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 ); } })(jQuery); 

Devrait faire le tour. Réglez-le sur le jaune, puis fondu en blanc

Je viens de résoudre un problème similaire à celui sur lequel je travaillais. Par défaut, la fonction animée 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.

Définissez votre CSS comme suit:

 @-webkit-keyframes yellowfade { from { background: yellow; } to { background: transparent; } } @-moz-keyframes yellowfade { from { background: yellow; } to { background: transparent; } } .yft { -webkit-animation: yellowfade 1.5s; -moz-animation: yellowfade 1.5s; animation: yellowfade 1.5s; } 

Et ajoutez simplement la classe yft à n’importe quel élément $('.some-item').addClass('yft')

Démo: http://jsfiddle.net/Q8KVC/528/

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

 function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) { var delta = maxValue - minValue; var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta); return Math.ceil(stepp) } function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) { if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt); var actStep = 0; elem.bgFadeInt = window.setInterval( function() { elem.css("backgroundColor", "rgb("+ easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+ easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+ easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")" ); actStep++; if (actStep > steps) { elem.css("backgroundColor", finalColor); window.clearInterval(elem.bgFadeInt); } } ,intervals) } 

Ensuite, appelez la fonction en utilisant ceci:

 doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 ); 

Je vous laisse deviner les parameters, ils sont assez explicites. Pour être honnête, le script ne vient pas de moi, je l’ai pris sur une page puis l’ai modifié pour qu’il fonctionne avec la dernière version de jQuery.

NB: testé sur firefox 3 et ie 6 (oui ça marche aussi sur cette vieille chose)

 function YellowFade(selector){ $(selector) .css('opacity', 0) .animate({ backgroundColor: 'Yellow', opacity: 1.0 }, 1000) .animate({ backgroundColor: '#ffffff', opacity: 0.0}, 350, function() { this.style.removeAtsortingbute('filter'); }); } 

La ligne this.style.removeAtsortingbute('filter') est destinée à un bogue anti-aliasing dans IE.

Maintenant, appelez YellowFade de n’importe où et passez votre sélecteur

 YellowFade('#myDivId'); 

Crédit : Phil Haack a fait une démonstration montrant exactement comment faire. Il faisait une démonstration sur JQuery et ASPNet MVC.

Regarde cette vidéo

Mise à jour : Avez-vous regardé la vidéo? J’ai oublié de mentionner que cela nécessite le plugin JQuery.Color

Je détestais append 23kb juste pour append effects.core.js et effects.highlight.js, donc 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:

 $.fn.faderEffect = function(options){ options = jQuery.extend({ count: 3, // how many times to fadein speed: 500, // spped of fadein callback: false // call when done }, options); return this.each(function(){ // if we're done, do the callback if (0 == options.count) { if ( $.isFunction(options.callback) ) options.callback.call(this); return; } // hide so we can fade in if ( $(this).is(':visible') ) $(this).hide(); // fade in, and call again $(this).fadeIn(options.speed, function(){ options.count = options.count - 1; // countdown $(this).faderEffect(options); }); }); } 

puis l’appeler avec $ (‘. item’). faderEffect ();

c’est ma solution au problème. ça marche excellent. il passe la validation d’erreur jslint et fonctionne également dans IE8 et IE9. Bien sûr, vous pouvez le modifier pour accepter les codes de couleur et les rappels:

 jQuery.fn.highlight = function(level) { highlightIn = function(options){ var el = options.el; var visible = options.visible !== undefined ? options.visible : true; setTimeout(function(){ if (visible) { el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')'); if (options.iteration/10 < 1) { options.iteration += 2; highlightIn(options); } } else { el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')'); if (options.iteration/10 > 0) { options.iteration -= 2; highlightIn(options); } else { el.css('background-color', '#fff'); } } }, 50); }; highlightOut = function(options) { options.visible = false; highlightIn(options); }; level = typeof level !== 'undefined' ? level : 'warning'; highlightIn({'iteration': 1, 'el': $(this), 'color': level}); highlightOut({'iteration': 10, 'el': $(this), 'color': level}); }; 

Ceci est 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 à la dernière couleur. Vous pouvez append autant de couleurs que vous le souhaitez.

       
Click this text box to see the fade effect
     

Si vous souhaitez essayer une autre technique de fondu jaune qui ne dépend pas de l’interface utilisateur jQuery .effect, vous pouvez placer une div jaune (ou une autre couleur) derrière votre contenu et utiliser le fichier .fadeOut () de jQuery.

http://jsfiddle.net/yFJzn/2/

 
 
This is some content
 
 
 
   

J’ai simplement utilisé …

Un script simple / raw pour un “fondu jaune”, pas de plugins sauf jquery lui-même . Il suffit de définir le fond avec rgb (255,255, highlightcolor) dans une timer: