Effet de "surbrillance clignotante" jQuery sur un div ?

Question

Je cherche un moyen de faire ce qui suit.

J'ajoute un <div> à une page, et un callback ajax renvoie une valeur. Le site <div> est rempli avec les valeurs de l'appel ajax, et l'élément <div> est ensuite ajouté à un autre <div> qui fait office de colonne de table.

Je voudrais attirer l'attention de l'utilisateur, lui montrer qu'il y a quelque chose de nouveau sur la page.
Je veux le <div> pour clignoter, non pas pour afficher/cacher, mais pour mettre en évidence/déclater pendant un certain temps, disons 5 secondes.

J'ai regardé le plugin blink, mais d'après ce que j'ai vu, il ne fait que montrer/cacher un élément.

En fait, la solution doit être multi-navigateurs, et oui, IE est malheureusement inclus. Je vais probablement devoir bidouiller un peu pour que ça marche dans IE, mais globalement ça doit marcher.

Answer 1

jQuery UI Effet de surbrillance est ce que vous recherchez.

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

La documentation et la démo peuvent être trouvées aquí

---

Editar :
Peut-être que le jQuery UI Effet pulsé est plus approprié, voir aquí

---

Edit #2 :
Pour ajuster l'opacité, vous pouvez faire ceci :

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

...pour qu'il ne descende pas en dessous de 50% d'opacité.

Answer 2

Jetez un coup d'œil à http://jqueryui.com/demos/effect/ . Il a un effet nommé pulsate qui fera exactement ce que vous voulez.

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});

Answer 3

C'est un effet de clignotement personnalisé que j'ai créé, qui utilise setInterval y fadeTo

HTML -

<div id="box">Box</div>

JS -

setInterval(function(){blink()}, 1000);

    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

Aussi simple que cela puisse paraître.

http://jsfiddle.net/Ajey/25Wfn/

Answer 4

Pour ceux qui ne veulent pas inclure l'ensemble de jQuery UI, vous pouvez utiliser jQuery.pulse.js à la place.

Pour avoir une animation en boucle du changement d'opacité, faites ceci :

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

Il est léger (moins de 1kb), et vous permet de mettre en boucle tout type d'animation.

Answer 5

Vous pouvez vous intéresser à jQuery UI. Plus précisément, l'effet de surbrillance :

http://jqueryui.com/demos/effect/