jQuery effet de «surbrillance clignotante» sur div?

Je cherche un moyen de faire ce qui suit.

J'ajoute un <div>à une page et un rappel ajax renvoie une certaine valeur. Le <div>est rempli avec les valeurs de l'appel ajax, et le <div>est ensuite ajouté au début d'un autre <div>, qui agit comme une 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 que le <div>clignote, pas afficher / masquer, mais mettre en surbrillance / éteindre pendant un certain temps, disons 5 secondes.

J'ai regardé le plugin blink, mais pour autant que je puisse le voir, il ne s'affiche / se cache que sur un élément.

Btw, la solution doit être cross-browser, et oui, IE malheureusement inclus. Je vais probablement devoir pirater un peu pour le faire fonctionner dans IE, mais dans l'ensemble, cela doit fonctionner.

jQuery UI Highlight Effect est ce que vous recherchez.

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

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

Edit :
Peut-être que l' effet pulsé de l' interface utilisateur jQuery est plus approprié, voir ici

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

... donc il n'ira pas en dessous de 50% d'opacité.

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

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

Il s'agit d'un effet de clignotement personnalisé que j'ai créé, qui utilise setIntervaletfadeTo

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/

Si vous n'utilisez pas déjà la bibliothèque Jquery UI et que vous souhaitez imiter l'effet, ce que vous pouvez faire est très simple

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

vous pouvez également jouer avec les chiffres pour obtenir un chiffre plus rapide ou plus lent pour mieux s'adapter à votre conception.

Cela peut également être une fonction jquery globale afin que vous puissiez utiliser le même effet sur tout le site. Notez également que si vous mettez ce code dans une boucle for, vous pouvez avoir 1 million d'impulsions, vous n'êtes donc pas limité à la valeur par défaut 6 ou à la valeur par défaut.

EDIT: Ajouter ceci en tant que fonction jQuery globale

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

Clignotez facilement n'importe quel élément de votre site en utilisant ce qui suit

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

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

Pour avoir une animation en boucle de changement d'opacité, procédez comme suit:

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

Il est léger (moins de 1 ko) et vous permet de boucler tout type d'animations.

Vous voudrez peut-être examiner l'interface utilisateur jQuery. Plus précisément, l'effet de surbrillance:

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

Comme je ne vois aucune solution basée sur jQuery qui ne nécessite pas de bibliothèques supplémentaires, voici une solution simple qui est un peu plus flexible que celles utilisant fadeIn / fadeOut.

$.fn.blink = function (count) {
    var $this = $(this);

    count = count - 1 || 0;

    $this.animate({opacity: .25}, 100, function () {
        $this.animate({opacity: 1}, 100, function () {
            if (count > 0) {
                $this.blink(count);
            }
        });
    });
};

Utilisez-le comme ça

$('#element').blink(3); // 3 Times.

J'utilise différentes couleurs prédéfinies comme ceci:

theme = {
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
};

et utilisez-les comme ça

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);

facile :)

Si vous ne voulez pas la surcharge de jQuery UI, j'ai récemment écrit une solution récursive en utilisant .animate(). Vous pouvez personnaliser les délais et les couleurs selon vos besoins.

function doBlink(id, count) {
    $(id).animate({ backgroundColor: "#fee3ea" }, {
        duration: 100, 
        complete: function() {

            // reset
            $(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
                duration: 100,
                complete: function() {

                    // maybe call next round
                    if(count > 1) {
                        doBlink(id, --count);
                    }
                }
            });

        }
    });
}

Bien sûr, vous aurez besoin du plugin de couleur backgroundColorpour travailler avec .animate(). https://github.com/jquery/jquery-color

Et pour fournir un peu de contexte, c'est ainsi que je l'ai appelé. J'avais besoin de faire défiler la page jusqu'à mon div cible, puis de la faire clignoter.

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});

Je pense que vous pourriez utiliser une réponse similaire à celle que j'ai donnée. Vous pouvez le trouver ici ... https://stackoverflow.com/a/19083993/2063096

• devrait fonctionner sur tous les navigateurs car il ne contient que Javascript et jQuery.

Remarque: Cette solution n'utilise PAS l'interface utilisateur jQuery, il existe également un violon afin que vous puissiez jouer à votre guise avant de l'implémenter dans votre code.

donnez simplement elem.fadeOut (10) .fadeIn (10);

Essayez avec le plugin jquery.blink.js:

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>

<script>
jQuery('span').blink({color:'white'}, {color:'black'}, 50);
</script>

#prendre plaisir!

<script>
$(document).ready(function(){
    var count = 0;
    do {
        $('#toFlash').fadeOut(500).fadeIn(500);
        count++;
    } while(count < 10);/*set how many time you want it to flash*/
});
</script

Vérifiez-le -

<input type="button" id="btnclick" value="click" />
var intervalA;
        var intervalB;

        $(document).ready(function () {

            $('#btnclick').click(function () {
                blinkFont();

                setTimeout(function () {
                    clearInterval(intervalA);
                    clearInterval(intervalB);
                }, 5000);
            });
        });

        function blinkFont() {
            document.getElementById("blink").style.color = "red"
            document.getElementById("blink").style.background = "black"
            intervalA = setTimeout("blinkFont()", 500);
        }

        function setblinkFont() {
            document.getElementById("blink").style.color = "black"
            document.getElementById("blink").style.background = "red"
            intervalB = setTimeout("blinkFont()", 500);
        }

    </script>

    <div id="blink" class="live-chat">
        <span>This is blinking text and background</span>
    </div>

Je n'ai pas pu trouver exactement ce que je cherchais, alors j'ai écrit quelque chose d'aussi basique que possible. La classe en surbrillance pourrait simplement être une couleur d'arrière-plan.

var blinking = false; // global scope

function start_blinking() {
    blinking = true;
    blink();
}

function stop_blinking() {
    blinking = false;
}

function blink(x=0) {
    $("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping

    if (blinking) {
        if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x
        setTimeout(function(){blink(++x)},500); // increment x and recurse
    }
}