web-dev-qa-db-fra.com

jQuery "effet clignotant" effet sur div?

Je cherche un moyen de faire ce qui suit.

J'ajoute un <div> à une page et un rappel ajax renvoie une 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.

J'aimerais 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 pour afficher/masquer, mais pour mettre en surbrillance/ne pas souligner pendant un certain temps, disons 5 secondes.

Je suis en train de regarder le plugin blink, mais autant que je sache, il ne montre/cache que sur un élément.

Btw, la solution doit être multi-navigateur, et oui, IE malheureusement inclus. Je vais probablement devoir bidouiller un peu pour que cela fonctionne dans IE, mais dans l’ensemble, cela doit fonctionner.

jquerycsshighlightingeffects
84
ZolaKt

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és ici

Modifier

Peut-être que l'effet Pulsate 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 ne sera pas inférieur à 50% d'opacité.

168
sled

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");});
29
Alternegro

C'est un effet de clignotement personnalisé que j'ai créé, qui utilise setInterval et 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 devient.

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

28
Ajey

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 numéro plus rapide ou plus adapté à votre design.

Cela peut également être une fonction globale jquery afin que vous puissiez utiliser le même effet sur le site. Notez également que si vous placez ce code dans une boucle for, vous pouvez générer 1 million d'impulsions. Par conséquent, vous n'êtes pas limité à la valeur par défaut 6 ni à la valeur par défaut.

EDIT: Ajouter ceci en tant que fonction globale jQuery

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

Blink n'importe quel élément facilement 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
18
Clayton C

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

Pour avoir une animation en boucle d'opacité changeante, 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 mettre en boucle tout type d'animation.

18
lulalala

Comme je ne vois pas de solutions basées sur jQuery qui ne nécessitent pas de bibliothèques supplémentaires, voici une solution simple, 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.
6
Daniel Iser

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

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

6
ghoppe

Je ne trouvais pas 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
    }
}
0
Brandon Blackwell

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

  • devrait fonctionner sur tous les navigateurs comme javery et jQuery.

Remarque: cette solution n'utilise PAS l'interface utilisateur de jQuery. Il existe également un violon permettant de jouer à votre guise avant de l'implémenter dans votre code.

0
SoEzPz

Si vous ne voulez pas de 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 couleur pour que backgroundColor fonctionne avec .animate(). https://github.com/jquery/jquery-color

Et pour fournir un peu de contexte, voici comment je l’appelais. Je devais faire défiler la page à mon div cible, puis le faire clignoter.

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

il suffit de donner elem.fadeOut (10) .fadeIn (10);

0
ibsenv

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

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

et les utiliser comme ça

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

facile :)

0
metamagicson

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!

0
Arthur Araújo
<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
0
Perez

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