Aide JQuery - animer la couleur de fond

À l'aide de JQuery, ce que je veux faire est de créer une fonction que lorsque j'appelle la fonction, il va s'estomper la couleur de fond de mon "#page" DIV du CSS définit la couleur de fond au jaune puis à l'arrière à l'original de la couleur de fond de CSS pour #page.

Des idées sur comment je peut le faire avec JQuery?

Je sais JQuery possède à la fois une "animation" et "mettre en évidence la fonctionnalité". Il semble "highlight" pourrait être l'option la plus appropriée, mais je ne suis pas certain.

Grâce

source d'informationauteur

  1. 17

    Son assez lourd à charger jquery UI juste pour cette fonction, mais si vous l'utilisez de toute façon, l'effet que vous voulez est de "mettre en surbrillance'

    http://docs.jquery.com/UI/Effects/Highlight

    $("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});
  2. 7
    function flashColor(id)
{
    var container = $('#'+id);
    if(container.length)
    {
        var originalColor = container.css('backgroundColor');
        container.animate({
            backgroundColor:'yellow'
        },'normal','linear',function(){
            $(this).animate({
                backgroundColor:originalColor
            });
        });
    }
}
  3. 6

    Vous avez seulement besoin de jQuery plugin color si vous souhaitez utiliser des couleurs nommées (par exemple 'yellow' au lieu de '#FFFF9C'). J'ai eu plus ou moins de succès avec animatemais a constaté que l'utilisation de ses construit en rappel plus du jQuery css semble fonctionner pour la plupart des cas.

    Essayez d'ajouter cette fonction:

    $(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FFFF9C";
        var animateMs = duration || 1000;
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; //default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate({ backgroundColor: originalBg }, animateMs, null, function () {
                jQuery(this).css("backgroundColor", originalBg); 
            });
    };
});

    et de l'appeler de la sorte: 

    $('#page').animateHighlight();

    Testé dans IE9, FF4, et de Chrome, à l'aide de jQuery 1.5 (n'ont PAS besoin de l'INTERFACE utilisateur plugin pour cela).

  4. 2

    Vous pouvez utiliser le construit en fonction jQuery animer() avec un rappel de tourner la div retour à la couleur d'origine. Ou utiliser le jQuery impulsion plugin pour le faire automatiquement.

    Espère que ça aide!

  5. 1

    Vous avez besoin de la couleur plugin pour animer entre les couleurs.

    Voir un précédent DONC q & a

  6. 1

    Vous voudrez peut-être vérifier les plugins comme cette une pour atteindre ce que certains appellent un "flash".

    Malheureusement, à la recherche pour le terme "jquery flash plugin" les rendements des centaines de résultats pour SWF player plugins.

  7. 1

    test avec tous les navigateurs

    $(document).ready(function () {
    var id = $("div#1"); //div id=1
    var color = "lightblue"; //color to highlight
    var delayms = "800"; //mseconds to stay color
    $(id).css("backgroundColor",color)
    .css("transition","all 1.5s ease") //you may also (-moz-*, -o-*, -ms-*) e.g
    .css("backgroundColor",color).delay(delayms).queue(function() {
        $(id).css("backgroundColor",""); 
        $(id).dequeue();
    }); 
});
  8. 0

    Seulement cela m'a aidé. Source: questions/5205445

    $("div").click(function() 
{
  //do fading 3 times
  for(i=0;i<3;i++) 
  {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});