efekt jQuery "migające podświetlenie" na div?

Spójrz na http://jqueryui.com/demos/effect / . ma efekt o nazwie pulsate, który zrobi dokładnie to, co chcesz.

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

Jest to Niestandardowy efekt mrugnięcia, który stworzyłem, który wykorzystuje setInterval i fadeTo

HTML-

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

JS -

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


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

Tak proste, jak się da.

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

Dla tych, którzy nie chcą dołączać całego interfejsu jQuery, możesz użyć jQuery.puls.JS zamiast.

Aby mieć zapętloną animację zmiany krycia, wykonaj następujące czynności:

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

Jest lekki (mniej niż 1KB) i pozwala na zapętlenie dowolnych animacji.

Jeśli nie używasz jeszcze biblioteki jQuery UI i chcesz naśladować efekt, to co możesz zrobić jest bardzo proste

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

Możesz również bawić się liczbami, aby uzyskać szybszy lub wolniejszy, aby lepiej pasował do twojego projektu.

Może to być również globalna funkcja jquery, dzięki czemu można użyć tego samego efektu w całej witrynie. Zauważ również, że jeśli umieścisz ten kod w pętli for, możesz mieć 1 milion impulsów, więc nie jesteś ograniczony do domyślnej 6 lub ile domyślnej jest.

Edytuj: Dodawanie tego jako globalnej funkcji jQuery

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

Mignij dowolny element z witryny za pomocą następującego

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

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

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

Możesz zajrzeć do jQuery UI. W szczególności efekt podświetlenia:

Http://jqueryui.com/demos/effect/

Ponieważ nie widzę żadnych rozwiązań opartych na jQuery, które nie wymagają dodatkowych bibliotek, tutaj jest prosty, który jest nieco bardziej elastyczny niż te, które używają 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);
            }
        });
    });
};

Użyj go w ten sposób

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

Jeśli nie chcesz narzutu jQuery UI, napisałem niedawno rozwiązanie rekurencyjne używając .animate(). Możesz dostosować opóźnienia i kolory zgodnie z potrzebami.

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

        }
    });
}

Oczywiście będziesz potrzebował wtyczki color, aby uzyskać backgroundColor do pracy z .animate(). https://github.com/jquery/jquery-color

I aby dać trochę kontekstu, tak to nazwałem. Musiałem przewijać stronę do docelowego div, a następnie migać.

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

Myślę, że przydałaby ci się podobna odpowiedź, którą dałem. Znajdziesz go tutaj... https://stackoverflow.com/a/19083993/2063096

• powinien działać na wszystkich przeglądarkach, ponieważ tylko Javascript i jQuery.

Uwaga: To rozwiązanie nie używa jQuery UI, istnieje również fiddle, dzięki czemu można bawić się według własnych upodobań przed zaimplementowaniem go w kodzie.

Używam różnych predefiniowanych kolorów jak TAK:

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

I używaj ich w ten sposób

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

Easy:)

Po prostu daj elem.fadeOut (10)fadeIn (10);

Spróbuj z jquery.mrugnij.wtyczka 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>

#enjoy!

<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

Sprawdź to-

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