jQuery effet de «surbrillance clignotante» sur div?


88

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.


4
Veuillez ne pas le faire. Si vous le devez, mettez-le simplement en surbrillance avec l'effet de surbrillance ( docs.jquery.com/UI/Effects/Highlight ), mais ne le faites pas clignoter.
tvanfosson

1
@tv Je pense que deux ou trois "clignotements" courts (où un "clignotement" est, espérons-le, quelque chose de subtil, comme une lueur de bordure animée ou quelque chose du genre) sont OK et pas irritants, mais certainement à l'ancienne sur une longue période de le temps serait mauvais.
Pointy

1
Hehe, je sais que cligner des yeux est irritant, mais cela a en fait un but ici. On ne s'attend pas à ce que l'utilisateur reste assis à côté du moniteur toute la journée, il doit donc voir si quelque chose a changé à distance
ZolaKt

25
Vous êtes hilarant les gars. Les pages Web ne sont utilisées que pour ce que vous pensez être juste? Je ne veux pas mettre en évidence, j'ai besoin d'un clin d'œil parce que j'écris une page de moniteur de processus à afficher sur un téléviseur grand format et elle doit clignoter en rouge et continuer pour que les yeux des gens soient attirés par elle.
Bmo

Réponses:


173

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


1
Pulsate est ce que je recherche. Merci beaucoup. Juste, est-il possible de l'empêcher de disparaître complètement. Juste pour s'estomper, disons à 50% d'opacité Peut-être juste pour enchaîner un effet de surbrillance plusieurs fois?
ZolaKt


30

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/


1
Fonctionne très bien! Et aucune interface utilisateur JQuery n'est nécessaire.
Pavel Vlasov

excellente solution! fonctionne sans aucun problème avec Jquery. Merci
Site numérique

C'est la meilleure solution ici!
DmitryBoyko

La meilleure solution ici!
w3spi

19

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

18

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.



1
@JeromeJaglale Je l'utilise sans interface utilisateur jQuery, car le changement d'opacité peut être effectué uniquement dans jQuery. Il devrait en être de même pour vous, sauf si vous utilisez des animations spécifiques à jQuery UI.
lulalala

1
Bon point. J'ai été induit en erreur par la première démo (texte clignotant en rouge) qui nécessite jQuery UI Effects.
Jerome Jaglale

Juste une note. Vous ne devez inclure que jquery.color.jspour la couleur.
Dave


6

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.

1

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


0

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

0

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.


0

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


FadeOut / FadeIn masque / montre l'élément à la fin ce qui n'est pas ce que je cherchais. J'avais besoin d'augmenter / diminuer l'opacité des couleurs sans cacher l'élément
ZolaKt

Non, elem.show (). Hide () le fait. FadeOut / FadeIn modifie l'opacité. Vous pouvez modifier la durée de fadeOut / fadeIn pour obtenir l'effet souhaité. Cependant, il cache l'élément une fois.
ibsenv

0

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

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

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
    }
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.