jQuery efekt „migającego podświetlenia” na div?

Szukam sposobu, aby wykonać następujące czynności.

Dodaję <div>do strony, a wywołanie zwrotne Ajax zwraca pewną wartość. <div>Jest wypełnione wartościami z AJAX i <div>jest następnie dołączany do drugiego <div>, który działa jako kolumna tabeli.

Chciałbym zwrócić uwagę użytkownika, pokazać mu, że na stronie jest coś nowego.
Chcę, <div>żeby migał, a nie pokazywał / ukrywał, ale podświetlał / nie podświetlał przez jakiś czas, powiedzmy 5 sekund.

Patrzyłem na wtyczkę blink, ale o ile widzę, pokazuje / ukrywa tylko na elemencie.

Przy okazji, rozwiązanie musi być cross-browser, i tak, IE niestety zawiera. Prawdopodobnie będę musiał trochę zhakować, aby działał w IE, ale ogólnie musi działać.

Efekt wyróżnienia jQuery UI jest tym, czego szukasz.

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

Dokumentację i demo można znaleźć tutaj

Edycja :
Może bardziej odpowiedni jest efekt pulsacji interfejsu użytkownika jQuery , patrz tutaj

Edycja nr 2 :
Aby dostosować krycie, możesz to zrobić:

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

... więc krycie nie spadnie poniżej 50%.

Spójrz na http://jqueryui.com/demos/effect/ . Ma efekt zwany pulsacją, który zrobi dokładnie to, co chcesz.

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

To jest stworzony przeze mnie niestandardowy efekt migania, który wykorzystuje setIntervalifadeTo

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 to tylko możliwe.

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

Jeśli nie korzystasz jeszcze z 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 też bawić się liczbami, aby uzyskać szybszy lub wolniejszy, aby lepiej pasował do Twojego projektu.

Może to być również globalna funkcja jquery, więc możesz 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ślnych 6 ani do ich wartości domyślnej.

EDYCJA: Dodanie tego jako globalnej funkcji jQuery

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

Łatwo zamknij dowolny element ze swojej witryny, korzystając z następującego polecenia

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

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

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

Ci, którzy nie chcą uwzględniać całego interfejsu użytkownika jQuery, mogą zamiast tego użyć jQuery.pulse.js .

Aby uzyskać 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 umożliwia zapętlenie dowolnego rodzaju animacji.

Możesz zajrzeć do interfejsu użytkownika jQuery. 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 proste, które jest nieco bardziej elastyczne niż te używające 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 tego w ten sposób

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

Używam różnych predefiniowanych kolorów, jak na przykład:

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

i używaj ich w ten sposób

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

łatwy :)

Jeśli nie chcesz narzutów związanych z interfejsem użytkownika jQuery, niedawno napisałem rozwiązanie rekurencyjne wykorzystujące .animate(). Możesz dostosować opóźnienia i kolory według potrzeb.

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 kolorów, aby rozpocząć backgroundColorpracę .animate(). https://github.com/jquery/jquery-color

Aby zapewnić trochę kontekstu, tak to nazwałem. Musiałem przewinąć stronę do mojego docelowego div, a następnie go zamrugać.

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

Myślę, że możesz użyć podobnej odpowiedzi, której udzieliłem. Możesz go znaleźć tutaj ... https://stackoverflow.com/a/19083993/2063096

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

Uwaga: to rozwiązanie NIE korzysta z interfejsu użytkownika jQuery, jest też skrzypce, dzięki czemu można bawić się według własnych upodobań przed zaimplementowaniem go w kodzie.

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

Spróbuj z wtyczką 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>

#cieszyć się!

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

Nie mogłem znaleźć dokładnie tego, czego szukałem, więc napisałem coś tak podstawowego, jak tylko mogłem. Podświetlona klasa może być po prostu kolorem tła.

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