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


88

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


4
Proszę nie. Jeśli musisz, po prostu zaznacz go efektem podświetlenia ( docs.jquery.com/UI/Effects/Highlight ), ale nie mrugaj.
tvanfosson

1
@tv Myślę, że krótkie dwa lub trzy „mrugnięcia” (gdzie „mrugnięcie” jest, mam nadzieję, czymś subtelnym, jak animowana poświata obramowania lub coś w tym rodzaju) są w porządku i nie są irytujące, ale zdecydowanie staromodne mruganie przez długi okres czas byłby zły.
Pointy

1
Hehe, wiem, że mruganie jest irytujące, ale tak naprawdę ma tutaj cel. Od użytkownika nie oczekuje się siedzenia przy monitorze przez cały dzień, więc musi zobaczyć, czy coś się zmieniło z odległości
ZolaKt

25
Jesteście przezabawni. Strony internetowe są używane tylko do tego, co według was mają rację? Nie chcę podkreślać, potrzebuję mrugnięcia, ponieważ piszę stronę monitora procesu do oglądania na telewizorze wielkoformatowym i musi migać na czerwono i kontynuować, aby ludzie przyciągali wzrok.
Bmo

Odpowiedzi:


173

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


1
Pulsacja jest tym, czego szukam. Wielkie dzięki. Po prostu, czy w ogóle istnieje, aby zapobiec całkowitemu zanikowi. Po prostu zniknąć, powiedzmy do 50% krycia? Może tylko po to, aby kilka razy połączyć efekt podświetlenia?
ZolaKt


30

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/


1
Działa dobrze! I nie jest potrzebny interfejs użytkownika JQuery.
Pavel Vlasov

świetne rozwiązanie! działa bez żadnych problemów przy użyciu Jquery. Dzięki
Witryna cyfrowa

To najlepsze rozwiązanie!
DmitryBoyko,

Najlepsze rozwiązanie tutaj!
w3spi

19

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

18

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.


1
Nadal wymaga jQuery UI "Efekty"
Jerome Jaglale

1
@JeromeJaglale Używam go bez interfejsu jQuery, ponieważ zmiana krycia może być wykonana w samym jQuery. Powinno być takie samo dla Ciebie, chyba że używasz animacji specyficznych dla interfejsu użytkownika jQuery.
lulalala

1
Słuszna uwaga. Zmyliło mnie pierwsze demo (tekst pulsujący na czerwono), które wymaga jQuery UI Effects.
Jerome Jaglale

Tylko uwaga. Musisz tylko uwzględnić jquery.color.jskolor.
Dave


6

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.

1

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


0

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

0

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.


0

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


FadeOut / FadeIn ukrywa / pokazuje element na końcu, który nie jest tym, czego szukałem. Musiałem zwiększyć / zmniejszyć krycie koloru bez ukrywania elementu
ZolaKt,

Nie, robi to elem.show (). Hide (). FadeOut / FadeIn zmienia opactity. Możesz manipulować czasem trwania fadeOut / fadeIn, aby uzyskać wymagany efekt. Jednak kiedyś ukrywa elem.
ibsenv


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

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>

0

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
    }
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.