Effet de fondu jaune avec JQuery

Question

Je voudrais mettre en place quelque chose de similaire à 37Signals Jaune de l'effet de Fondu.

Je suis à l'aide de Jquery 1.3.2

Le code

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

et le prochain appel de jaune fondu les DOM elment avec boîte id.

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

Mais il ne fait que jaune. Pas de fond blanc après 15000 millisecondes.

Aucune idée de pourquoi ça ne fonctionne pas?

Solution

Vous pouvez utiliser:

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

Mais vous devez inclure:

effects.core.js
effects.highlight.js

Answer 1

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

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

Comme Steerpike l’a souligné dans les commentaires, effectuez les actions suivantes: effects.core.js et effects.highlight.js .

Answer 2

J'ai adoré la réponse de Sterling Nichols, car elle était légère et ne nécessitait pas de plug-in. Cependant, j'ai découvert que cela ne fonctionnait pas avec les éléments flottants (par exemple, lorsque l'élément est "float: right"). J'ai donc réécrit le code pour afficher la surbrillance correctement 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(); });
    });
}
 

Answer 3

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

Answer 4

 (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

Answer 5

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 jQuery Color Animations .

Toutes les réponses ici utilisent ce plugin mais personne ne le mentionne.