effet de fondu jaune avec JQuery

Question

Je voudrais mettre en œuvre quelque chose de similaire à 37Signals's Yellow Fade effect.

J'utilise JQuery 1.3.2

Le code

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

et le spectacle d'appel suivant fondu jaune DOM Elment avec case id.

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

Mais cela ne fait que le rendre jaune. Pas de fond blanc après 15 000 millisecondes.

Une idée de pourquoi cela 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 a souligné dans les commentaires, effects.core.js et effects.highlight.js doivent être inclus afin d'utiliser.

Answer 2

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

Doit faire l'affaire. Réglez-le sur le jaune, puis fondu à blanc

Answer 3

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 un bug anti-aliasing dans IE.

Maintenant, appelez YellowFade d'où, et passez votre sélection

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.

Take a look at this video

Mise à jour: Avez-vous jetez un oeil à la vidéo? J'ai oublié de mentionner que cela nécessite le JQuery.Color plugin

Answer 4

Je viens de résoudre un problème similaire à celui-ci sur un projet sur lequel je travaillais. Par défaut, la fonction animée 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.

Answer 5

Je détestais ajouter 23kb juste pour ajouter effects.core.js et effects.highlight.js donc j'ai écrit ce qui suit.('Point').: Il émule le comportement en utilisant fadeIn (qui fait partie de jQuery lui-même) à 'flash' 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 avec $ faderEffect();

Answer 6

En fait, j'ai une solution qui a seulement besoin de jQuery 1.3x, et pas de plugin additionnel.

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 l'ai changé pour qu'il fonctionne avec le dernier jQuery.

NB: testé sur Firefox 3 et IE 6 (oui, il fonctionne sur cette vieille chose aussi)

Answer 7

Ceci est une option non-jQuery vous pouvez utiliser pour l'effet de fondu des couleurs. 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> 

Answer 8

Si vous souhaitez essayer une technique de fondu jaune alternative qui ne dépend pas de .effect jQuery UI, vous pouvez placer un jaune (ou une autre couleur) div derrière votre contenu et utiliser le 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> 

Answer 9

La bibliothèque d'effets jQuery ajoute un peu de frais généraux inutiles à votre application. Vous pouvez accomplir la même chose avec jQuery seulement. 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 10

J'aimé réponse Sterling Nichols, car il était léger et n'a pas besoin d'un plug-in. Cependant, j'ai découvert qu'il ne fonctionnait pas avec des éléments flottants (c'est-à-dire quand l'élément est "float: right"). Donc, je re-écrit le code pour afficher le point fort bien, peu importe la façon dont l'élément est positionné 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(); }); 
    }); 
} 

En option:
Utilisez le code suivant si vous voulez aussi correspondre au rayon de la frontière 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(); }); 
    }); 
} 

Answer 11

Ceci est ma solution au problème. cela fonctionne excellent. il passe la validation d'erreur de jslint et fonctionne également décent dans IE8 et IE9. Bien sûr, vous pouvez modifier pour accepter les codes couleurs et callbacks:

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

Answer 12

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> 

Answer 13

Un script simple/brut pour un "fadeout jaune", aucun plug-ins, sauf jquery lui-même.couchait arrière-plan avec rgb (255255, highlightcolor) 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> 

Answer 14

Définir 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 ajouter la classe yft à tout élément $('.some-item').addClass('yft')

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