jQuery effetto "lampeggiante evidenziazione" su div?

Sto cercando un modo per fare quanto segue.

Aggiungo un <div>a una pagina e un callback ajax restituisce un valore. La <div>viene riempito con i valori della chiamata ajax, e la <div>viene quindi anteposto all'altro <div>, che agisce come una colonna della tabella.

Vorrei attirare l'attenzione dell'utente, per mostrargli che c'è qualcosa di nuovo nella pagina.
Voglio <div>che lampeggi, non mostri / nascondi, ma evidenzi / rimandi per un po 'di tempo, diciamo 5 secondi.

Ho esaminato il plug-in blink, ma per quanto posso vedere mostra / nasconde solo un elemento.

A proposito, la soluzione deve essere cross-browser e sì, IE purtroppo incluso. Probabilmente dovrò hackerare un po 'per farlo funzionare in IE, ma nel complesso deve funzionare.

jQuery UI Highlight Effect è quello che stai cercando.

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

La documentazione e la demo possono essere trovate qui

Modifica :
forse l' effetto pulsato dell'interfaccia utente di jQuery è più appropriato, vedi qui

Modifica n. 2 :
per regolare l'opacità potresti fare questo:

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

... quindi non sarà inferiore al 50% di opacità.

Dai un'occhiata a http://jqueryui.com/demos/effect/ . Ha un effetto chiamato pulsate che farà esattamente quello che vuoi.

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

Questo è un effetto lampeggiante personalizzato che ho creato, che utilizza setIntervalefadeTo

HTML -

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

JS -

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


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

Semplice come diventa.

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

Se non stai già utilizzando la libreria dell'interfaccia utente di Jquery e desideri imitare l'effetto, ciò che puoi fare è molto semplice

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

puoi anche giocare con i numeri per ottenere uno più veloce o più lento per adattarsi meglio al tuo design.

Questa può anche essere una funzione jquery globale in modo da poter utilizzare lo stesso effetto in tutto il sito. Nota anche che se metti questo codice in un ciclo for puoi avere 1 milione di impulsi, quindi non sei limitato al valore predefinito 6 o quanto è predefinito.

EDIT: aggiungendolo come funzione jQuery globale

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

Lampeggia facilmente qualsiasi elemento dal tuo sito utilizzando quanto segue

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

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

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

Per coloro che non vogliono includere l'intera interfaccia utente di jQuery, è possibile utilizzare invece jQuery.pulse.js .

Per avere un'animazione a ciclo continuo della modifica dell'opacità, eseguire questa operazione:

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

È leggero (meno di 1kb) e ti consente di riprodurre in loop qualsiasi tipo di animazione.

Potresti voler esaminare l'interfaccia utente di jQuery. In particolare, l'effetto di evidenziazione:

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

Dal momento che non vedo alcuna soluzione basata su jQuery che non richieda librerie aggiuntive, ecco una soluzione semplice che è un po 'più flessibile di quelle che utilizzano 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);
            }
        });
    });
};

Usalo in questo modo

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

Uso diversi colori predefiniti in questo modo:

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

e usali in questo modo

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

facile :)

Se non vuoi il sovraccarico dell'interfaccia utente jQuery, di recente ho scritto una soluzione ricorsiva usando .animate(). Puoi personalizzare i ritardi ei colori di cui hai bisogno.

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

        }
    });
}

Ovviamente avrai bisogno del plug-in del colore backgroundColorper lavorare .animate(). https://github.com/jquery/jquery-color

E per fornire un po 'di contesto è così che l'ho chiamato. Avevo bisogno di scorrere la pagina fino al mio div di destinazione e poi lampeggiare.

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

Penso che potresti usare una risposta simile che ho dato. Puoi trovarlo qui ... https://stackoverflow.com/a/19083993/2063096

• dovrebbe funzionare su tutti i browser in quanto solo Javascript e jQuery.

Nota: questa soluzione NON utilizza jQuery UI, c'è anche un violino in modo da poter giocare a proprio piacimento prima di implementarlo nel codice.

basta dare elem.fadeOut (10) .fadeIn (10);

Prova con il 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>

#godere!

<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

Dai un'occhiata -

<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>

Non sono riuscito a trovare esattamente quello che stavo cercando, quindi ho scritto qualcosa di semplice come potevo farlo. La classe evidenziata potrebbe essere solo un colore di sfondo.

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