Comment rendre un élément "flash" en jQuery ?

Question

Je suis novice en matière de jQuery et j'ai une certaine expérience de l'utilisation de Prototype. Dans Prototype, il existe une méthode permettant de "faire clignoter" un élément, c'est-à-dire de le mettre brièvement en surbrillance dans une autre couleur et de le faire revenir à la normale afin d'attirer l'attention de l'utilisateur. Existe-t-il une telle méthode dans jQuery ? Je vois fadeIn, fadeOut et animate, mais je ne vois rien qui ressemble à "flash". Peut-être que l'une de ces trois méthodes peut être utilisée avec des entrées appropriées ?

Answer 1

Ma méthode est .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}

function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }

#demo1,
#demo2 {
  text-align: center;
  font-family: Helvetica;
  background: IndianRed;
  height: 50px;
  line-height: 50px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>

Answer 2

Vous pouvez utiliser le plugin jQuery Color .

Par exemple, pour attirer l'attention sur tous les divs de votre page, vous pouvez utiliser le code suivant :

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

Edit - Nouveau et amélioré

La méthode suivante utilise la même technique que ci-dessus, mais elle présente les avantages supplémentaires suivants :

• couleur et durée de la surbrillance paramétrées
• conserver la couleur de fond originale, au lieu de supposer qu'elle est blanche
• étant une extension de jQuery, vous pouvez l'utiliser sur n'importe quel objet

Étendre l'objet jQuery :

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

Exemple d'utilisation :

$("div").animateHighlight("#dd0000", 1000);

Answer 3

Vous pouvez utiliser des animations css3 pour faire clignoter un élément

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

Et vous jQuery pour ajouter la classe

jQuery(selector).addClass("flash");

Answer 4

Vous pourriez utiliser le effet de surbrillance dans jQuery UI pour réaliser la même chose, je suppose.

Answer 5

Si vous utilisez jQueryUI, il y a pulsate fonction dans UI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

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