Efecto de desvanecimiento 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 en la siguiente llamada se muestra en amarillo el elemento DOM con la identificación del cuadro .

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

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

¿Alguna idea de por qué no funciona?

Solución

Puedes usar:

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

Pero deberías incluir:

effects.core.js
effects.highlight.js

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

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

Como Steerpike señaló en los comentarios, effects.core.js y effects.highlight.js necesitan ser incluidos con el fin de utilizar este.

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 "float: right"). Así que reescribí el código para mostrar el resaltado correctamente sin importar cómo esté posicionado el elemento en la página:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .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);
        $("<div/>")
        .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(); });
    });
}

La biblioteca de efectos jQuery agrega un poco de sobrecarga innecesaria a su aplicación. Puede lograr lo mismo con jQuery solamente. http://jsfiddle.net/x2jrU/92/

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

$("#target").highlight();

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 yfta cualquier elemento$('.some-item').addClass('yft')

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

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

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

Acabo de resolver un problema similar a este en un proyecto en el que estaba trabajando. De forma predeterminada, la función de animación no puede animar colores. Intente incluir animaciones de color jQuery .

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

En realidad, tengo una solución que solo necesita jQuery 1.3xy 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)
}

A continuación, llame a la función usando esto:

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

Te dejaré adivinar los parámetros, se explican por sí mismos. Para ser honesto, el script no es mío, lo tomé en una página y luego lo cambié para que funcione con la última versión de jQuery.

NB: probado en firefox 3 e ie 6 (sí, también funciona en esa cosa vieja)

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 de 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 mostraba exactamente cómo hacer esto. Estaba haciendo una demostración en JQuery y ASPNet MVC.

Mira este video

Actualización : ¿Echaste un vistazo al video? Olvidé mencionar que esto requiere el complemento JQuery.Color

Odiaba agregar 23kb solo para agregar effects.core.js y effects.highlight.js, así que escribí lo siguiente. Emula el comportamiento usando fadeIn (que es parte de jQuery en sí) 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 al problema. funciona excelente. pasa la validación de error jslint y también funciona decente en IE8 e IE9. Por supuesto, puede modificarlo para aceptar 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 que no es de jQuery que puede usar para el efecto de desvanecimiento del 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.

   <html lang="en">
   <head>
   <script type="text/javascript">
  //###Face Effect for a text box#######

var targetColor;
var interval1;
var interval2;
var i=0;
var colors = ["#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF"];

function changeColor(){
    if (i<colors.length){
        document.getElementById("p1").style.backgroundColor=colors[i];
        i++;
    } 
    else{
        window.clearInterval(interval1);
        i=0;
    }
}
addEventListener("load",function(){
    document.getElementById("p1").addEventListener("click",function(e){
        interval1=setInterval("changeColor()",80);              

    })
});
</script>

</head>

<body>
<p id="p1">Click this text box to see the fade effect</p>

<footer>
 <p>By Jefrey Bulla</p>
</footer>
</div>
</body>
</html> 

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

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

<div class="yft">
    <div class="content">This is some content</div>
    <div class="yft_fade">&nbsp;</div>
</div>

<style>
  .yft_fade {
      background-color:yellow;
      display:none;
  }
  .content {
      position:absolute;
      top:0px;
  }
</style>

<script>
  $(document).ready(function() {
      $(".yft").click(function() {
          $(this).find(".yft_fade").show().fadeOut();
      });
  });​
</script>

Simplemente usé ...

<style>
tr.highlight {
background: #fffec6;
}
</style>


<script>
//on page load, add class
$(window).load(function() {
$("tr.table-item-id").addClass("highlight", 1200);
}); 

//fade out class
setTimeout(function(){
$("tr.table-item-id").removeClass("highlight", 1200);   
}, 5200);

</script>

Un script simple / sin procesar para un "fadeout amarillo", sin complementos excepto jquery . Simplemente estableciendo fondo con rgb (255,255, color de resaltado) en un temporizador:

<script>

    $(document).ready(function () {
        yellowFadeout();
    });

    function yellowFadeout() {
        if (typeof (yellowFadeout.timer) == "undefined")
            yellowFadeout.timer = setInterval(yellowFadeout, 50);
        if (typeof (yellowFadeout.highlightColor) == "undefined")
            yellowFadeout.highlightColor = 0;
        $(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
        yellowFadeout.highlightColor += 10;
        if (yellowFadeout.highlightColor >= 255) {
            $(".highlight").css('background','');
            clearInterval(yellowFadeout.timer);
        }
    }
</script>