Effet de fondu jaune avec JQuery

100

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

Sergio del Amo
la source
La source de la mise en évidence est ici: github.com/jquery/jquery-ui/blob/master/ui
...

Réponses:

98

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.

Baldu
la source
1
J'ai vu la démo sur le site jquery docs.jquery.com/UI/Effects/Highlight#overview J'ai essayé dans mon code mais je ne fais rien. Dois-je télécharger un supplément. Il dit dépendances: Effects Core. C'est un autre plugin.
Sergio del Amo
Bonne réponse, mais je mentionnerai simplement que c'est une fonction intégrée à jQuery effects.core.js, pas au fichier jQuery principal comme animate (). Je pensais juste que cela valait la peine d'être clarifié.
Steerpike
5
Heh, comme Sergio vient de le découvrir si visiblement ... oui Sergio, vous devez inclure le fichier effects.core.js et effects.highlight.js (vérifiez la source ici: docs.jquery.com/UI/Effects/Highlight )
Steerpike
2
Ceci est disponible dans l'interface utilisateur jQuery: docs.jquery.com/UI/Effects/Highlight#overview
Matt Scilipoti
7
En tant que mise à jour des commentaires précédents, vous n'incluez plus Effects.core.js et Effects.highlight.js (et ces anciennes URL ne fonctionnent plus). La nouvelle façon de l'inclure est d'inclure la bibliothèque jquery-ui: code.jquery.com/ui/1.10.4/jquery-ui.min.js
Sean Colombo
66

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(); });
    });
}
Doug S
la source
9
J'adore cette solution. Fonctionne très bien sur les lignes de table.
Perry Tew
Meilleure solution à ce jour. S'il copiait également le rayon de bordure de l'élément, ce serait encore mieux.
Stijn Van Bael
@StijnVanBael Code maintenant mis à jour pour copier border-radius. Merci pour la suggestion.
Doug S
C'est génial, pas besoin de la bibliothèque d'interface utilisateur maintenant pour moi, mais mon problème est que cela ne mettra pas en évidence tout mon div lors de la première utilisation, probablement parce qu'une partie est vide et que le texte est défini juste avant que cela ne soit appelé?
NaughtySquid
Bien, mais cela ne semble pas fonctionner sur les modaux tels que FeatherlightJs.
Ryan
64

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();
Sterling Nichols
la source
4
Merci, c'est mieux et je cherchais quelque chose avec lequel je peux éviter d'inclure un noyau d'interface utilisateur complet qui était complètement inutile.
deej
Tu gères. Exactement ce que je cherchais, sans ajouter un autre plugin. Et j'aime le fait qu'il fasse une superposition réelle de l'élément entier, par opposition à simplement changer la couleur d'arrière-plan de l'élément (qui pourrait être recouverte par du texte, des boutons, etc.).
Doug S
3
MISE À JOUR: Ce code échouera souvent en essayant de mettre en évidence des éléments flottants (c'est-à-dire lorsque l'élément est "float: right"). J'ai donc réécrit le code pour afficher correctement le surlignage quel que soit le positionnement de l'élément sur la page: stackoverflow.com/a/13106698/1145177
Doug S
Merci pour la mise à jour Doug .. Je vais devoir mettre à jour mes propres bibliothèques.
Sterling Nichols
2
Belle solution légère - fonctionne très bien. J'ai trouvé que mes faits saillants n'incluaient pas le remplissage d'élément, alors j'ai utilisé .width(el.outerWidth())et .height(el.outerHeight())pour mettre en évidence l'ensemble de mes champs de formulaire.
Mark B
13

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/

Kamran Ahmed
la source
8
(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


la source
Merci d'avoir répondu. Cela ne fonctionne pas cependant. Il semble que l'animation ne fait rien.
Sergio del Amo
quelle version de jQuery utilisez-vous?
1.3.2. J'ai ajouté ceci à ma question
Sergio del Amo
Cela a bien fonctionné pour mes besoins sans dépendances au-delà de jquery vanilla.
gojomo
3
Cela nécessite le plugin jQuery.Color () pour fonctionner: github.com/jquery/jquery-color
Dia Kharrat
7

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.

Travis
la source
3

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)


la source
2
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

Vin
la source
L'erreur suivante est lancée par la ligne de filtre. J'utilise le fondu jaune dans un élément de ligne de tableau (tr) "this.style.removeAttribute n'est pas une fonction [Break on this error] this.style.removeAttribute ('filter');"
Sergio del Amo
2

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

Corey
la source
Ce n'est pas la même chose que le fondu jaune dont l'utilisateur a besoin.
Jon Winstanley
2
Droite. Je suggère une alternative ou "quelque chose de similaire".
Corey
2

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});
};
beaucoup
la source
1
quel avantage cela a-t-il sur le point culminant de jQuery? docs.jquery.com/UI/Effects/Highlight
Nathan Koop
1
Eh bien dans mon cas, je ne pouvais pas utiliser Jquery ui. donc je me suis retrouvé avec la fixation d'une solution avec seulement Jquery.
plusieurs du
1

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> 
Jefrey Bulla
la source
0

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>
tfmontague
la source
0

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>
BENN1TH
la source
0

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>
Johan Danforth
la source
0

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.

Ashutosh Khanduala
la source