Gelber Fade-Effekt mit JQuery

Ich möchte etwas Ähnliches wie den Yellow Fade-Effekt von 37Signals implementieren .

Ich benutze Jquery 1.3.2

Der Code

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

und beim nächsten Aufruf zeigt gelb das DOM-Element mit der Box- ID aus.

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

Aber es macht es nur gelb. Kein weißer Hintergrund nach 15000 Millisekunden.

Irgendeine Idee, warum es nicht funktioniert?

Lösung

Sie können verwenden:

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

Aber Sie müssten Folgendes einschließen:

effects.core.js
effects.highlight.js

Diese Funktion ist Teil von jQuery effects.core.js :

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

Wie Steerpike in den Kommentaren hervorhob, müssen effects.core.js und effects.highlight.js enthalten sein, um dies nutzen zu können.

Ich habe die Antwort von Sterling Nichols geliebt, da sie leicht war und kein Plugin benötigte. Ich habe jedoch festgestellt, dass es mit schwebenden Elementen nicht funktioniert (z. B. wenn das Element "float: right" ist). Also habe ich den Code neu geschrieben, um die Hervorhebung richtig anzuzeigen, unabhängig davon, wie das Element auf der Seite positioniert ist:

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

Optional:
Verwenden Sie den folgenden Code, wenn Sie auch den Randradius des Elements anpassen möchten:

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

Die jQuery-Effektbibliothek fügt Ihrer App einen unnötigen Overhead hinzu. Sie können dasselbe nur mit jQuery erreichen. 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();

Definieren Sie Ihr CSS wie folgt:

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

Fügen Sie die Klasse einfach yftzu einem beliebigen Element hinzu$('.some-item').addClass('yft')

Demo: http://jsfiddle.net/Q8KVC/528/

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

Sollte den Trick machen. Stellen Sie es auf Gelb und verblassen Sie es dann auf Weiß

Ich habe gerade ein ähnliches Problem bei einem Projekt gelöst, an dem ich gearbeitet habe. Standardmäßig kann die Animationsfunktion keine Farben animieren. Versuchen Sie, jQuery-Farbanimationen einzuschließen .

Alle Antworten hier verwenden dieses Plugin, aber niemand erwähnt es.

Eigentlich habe ich eine Lösung, die nur jQuery 1.3x und kein zusätzliches Plugin benötigt.

Fügen Sie Ihrem Skript zunächst die folgenden Funktionen hinzu

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

Rufen Sie als nächstes die Funktion folgendermaßen auf:

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

Ich lasse Sie die Parameter erraten, sie sind ziemlich selbsterklärend. Um ehrlich zu sein, ist das Skript nicht von mir, ich habe es auf eine Seite genommen und dann geändert, damit es mit der neuesten jQuery funktioniert.

NB: getestet auf Firefox 3 und dh 6 (ja, es funktioniert auch auf diesem alten Ding)

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

Die Zeile this.style.removeAttribute('filter')ist für einen Anti-Aliasing-Fehler im IE.

Rufen Sie jetzt von überall YellowFade an und übergeben Sie Ihre Auswahl

YellowFade('#myDivId');

Bildnachweis : Phil Haack hatte eine Demo, die genau zeigte, wie das geht. Er machte eine Demo zu JQuery und ASPNet MVC.

Schauen Sie sich dieses Video an

Update : Hast du dir das Video angesehen? Um dies zu erwähnen, ist das JQuery.Color-Plugin erforderlich

Ich hasste es, 23 KB hinzuzufügen, nur um effects.core.js und effects.highlight.js hinzuzufügen, also schrieb ich Folgendes. Es emuliert das Verhalten, indem es fadeIn (das Teil von jQuery selbst ist) verwendet, um das Element zu "flashen":

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

Rufen Sie es dann mit $ ('. item') auf. faderEffect ();

Das ist meine Lösung für das Problem. es funktioniert hervorragend. Es besteht die jslint-Fehlerüberprüfung und funktioniert auch in IE8 und IE9 einwandfrei. Natürlich können Sie es optimieren, um Farbcodes und Rückrufe zu akzeptieren:

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

Dies ist eine Nicht-jQuery-Option, die Sie für den Farbüberblendungseffekt verwenden können. Im Array "Farben" fügen Sie die Übergangsfarben hinzu, die Sie von der Anfangsfarbe bis zur letzten Farbe benötigen. Sie können so viele Farben hinzufügen, wie Sie möchten.

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

Wenn Sie eine alternative Yellow-Fade-Technik ausprobieren möchten, die nicht vom Effekt der jQuery-Benutzeroberfläche abhängt, können Sie ein gelbes Div (oder eine andere Farbe) hinter Ihrem Inhalt positionieren und jQuery .fadeOut () verwenden.

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>

Ich habe einfach benutzt ...

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

Ein einfaches / rohes Skript für ein "gelbes Ausblenden", keine Plugins außer jquery selbst . Setzen Sie einfach den Hintergrund mit RGB (255.255, Hervorhebungsfarbe) in einem Timer:

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