Efecto de fundido amarillo con JQuery

Me gustaría implementar algo similar al efecto Yellow Fade de 37Signals.

Estoy usando Jquery 1.3.2

El código

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

y el siguiente show show amarillo se desvanece el elemento DOM con el ID de la casilla .

 $("#box").yellowFade(); 

Pero solo lo hace amarillo. Sin fondo blanco después de 15000 milisegundos.

¿Alguna idea de por qué no está funcionando?

Solución

Puedes usar:

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

Pero necesitarías incluir:

effects.core.js
effects.highlight.js

Esta función es parte de jQuery effects.core.js :

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

Como señaló Steerpike en los comentarios, es necesario incluir effects.core.js y effects.highlight.js para usar esto.

La biblioteca de efectos jQuery agrega bastante sobrecarga innecesaria a su aplicación. Puede lograr lo mismo solo con jQuery. 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();

Me encantó la respuesta de Sterling Nichols, ya que era liviana y no requería un complemento. Sin embargo, descubrí que no funcionaba con elementos flotantes (es decir, cuando el elemento es “flotante: derecho”). Así que reescribí el código para mostrar el resaltado correctamente sin importar cómo se posiciona el elemento en la página:

 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(); }); }); }

Opcional:
Use el siguiente código si también desea hacer coincidir el radio del borde del elemento:

 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); 

Debería hacer el truco. Ponlo en amarillo, luego difumina en blanco

Acabo de resolver un problema similar a este en un proyecto en el que estaba trabajando. Por defecto, la función animada no puede animar colores. Prueba incluir jQuery Color Animations .

Todas las respuestas aquí usan este complemento pero nadie lo menciona.

Defina su CSS de la siguiente manera:

 @-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; } 

Y solo agrega la clase yft a cualquier artículo $('.some-item').addClass('yft')

Demostración: http://jsfiddle.net/Q8KVC/528/

En realidad, tengo una solución que solo necesita jQuery 1.3x y ningún complemento adicional.

Primero, agregue las siguientes funciones a su 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) } 

Luego, llama a la función usando esto:

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

Te dejaré adivinar los parámetros, son bastante auto explicativos. Para ser sincero, el guión no es mío, lo tomé en una página y luego lo cambié para que funcione con la última jQuery.

NB: probado en Firefox 3 y es decir, 6 (sí, también funciona en esa cosa antigua)

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

La línea this.style.removeAttribute('filter') es para un error anti-aliasing en IE.

Ahora, llame a YellowFade desde cualquier lugar, y pase su selector

 YellowFade('#myDivId'); 

Crédito : Phil Haack tenía una demostración que muestra exactamente cómo hacer esto. Estaba haciendo una demostración en JQuery y ASPNet MVC.

Echa un vistazo a este video

Actualización : ¿Echa un vistazo al video? Olvidé mencionar esto requiere el plugin JQuery.Color

Odiaba agregar 23kb solo para agregar effects.core.js y effects.highlight.js, así que escribí lo siguiente. Emula el comportamiento al usar fadeIn (que es parte de jQuery) para ‘flashear’ el elemento:

 $.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); }); }); } 

luego llámalo con $ (‘. item’). faderEffect ();

esta es mi solución para el problema. funciona excelente pasa la validación de error jslint y también funciona decente en IE8 e IE9. Por supuesto, puede modificarlo para que acepte códigos de color y devoluciones de llamada:

 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}); }; 

Esta es una opción no jQuery que puede usar para el efecto de fundido de color. En la matriz “colores”, agrega los colores de transición que necesita desde el color inicial hasta el último color. Puede agregar tantos colores como desee.

       

Click this text box to see the fade effect

By Jefrey Bulla

Si desea probar una técnica alternativa de fundido amarillo que no dependa del efecto de jQuery UI, podría colocar un div amarillo (u otro color) detrás de su contenido y usar jQuery .fadeOut ().

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

 
This is some content
 

Simplemente utilicé …

   

Un script simple / crudo para un “fadeout amarillo”, sin complementos excepto jquery . Simplemente configurando el fondo con rgb (255,255, highlightcolor) en un temporizador: