Effet de fondu jaune avec JQuery

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:

effets.core.js
effets.highlight.js

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

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

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

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:

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

Facultatif:
utilisez le code suivant si vous souhaitez également faire correspondre le rayon de la bordure de l'élément:

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

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

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/

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

Devrait faire l'affaire. Réglez-le sur le jaune, puis fondez-le en blanc

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.

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

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

YellowFade('#myDivId');

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

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:

$.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 appelez-le avec $ ('. item'). faderEffect ();

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:

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

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.

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

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

J'ai simplement utilisé ...

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

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

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:

<h2>Carbon Steel for Blacksmithing</h2>

<p>The vast majority of blacksmithing uses low and medium carbon steels. High carbon steel, sometimes called “carbon tool steel,” is very hard, and difficult to bend or weld; it gets very brittle once it’s been heat-treated.</p>
<p>You can buy steel, or you can find and recycle. I prefer the later.</p>

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!

https://stackoverflow.com/questions/848797/yellow-fade-effect-with-jquery/63571443#:~:text=Carbon%20Steel%20for%20Blacksmithing,you%20can%20find%20and%20recycle.

Pour donner un exemple en direct: suivez le lien ci-dessus pour voir l'effet de surbrillance sur le contenu que j'ai mentionné dans le lien.