Jak zrobić element „flash” w jQuery


249

Jestem nowy w jQuery i mam doświadczenie w korzystaniu z Prototype. W Prototypie istnieje metoda „flashowania” elementu - tj. krótko zaznacz go w innym kolorze i pozwól mu powrócić do normalnego stanu, aby przyciągnąć uwagę użytkownika. Czy w jQuery istnieje taka metoda? Widzę fadeIn, fadeOut i animację, ale nie widzę czegoś takiego jak „flash”. Być może jeden z tych trzech może być użyty z odpowiednimi danymi wejściowymi?


4
To nie odpowiada OP, ale (luźno przetestowany) kod może być przydatny dla przyszłych wyszukiwarek Google (takich jak ja):$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };
Cory Mawhorter

3
dodaj ten css do elementu:, text-decoration:blinka następnie usuń go.
Dementyczny


Umieszczam tutaj demo JSFiddle, które moim zdaniem jest lepszą odpowiedzią niż znalazłem na tej stronie: stackoverflow.com/a/52283660/470749
Ryan

Pamiętaj, że mrugnięcie jest oficjalnie przestarzałe na rzecz animacji. Sprawdź na: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

Odpowiedzi:


318

Moja droga to .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);


14
Nie jest to najpiękniejsze rozwiązanie, ale krótkie, łatwe do zrozumienia i nie wymaga interfejsu użytkownika / efektów. Miły!
Chris Jaynes

21
Używam opóźnienia przed sekwencją fadeIn, Fadeout, coś $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
migające tła często wyglądają tandetnie lub po prostu zgrzytają - szczególnie jeśli przedmiot, który migasz, siedzi na zwykłym białym tle. wypróbuj najpierw, zanim dodasz wtyczki kolorów i spróbujesz
sflashować

4
Problem z tą metodą polega na tym, że te zdarzenia potencjalnie na siebie natrafiają. Prawdopodobnie powinieneś umieścić każde kolejne fadeIn i fadeOut w odpowiednich wywołaniach zwrotnych. Na przykład: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

Uwaga: używaj tego w kodzie sprawdzania poprawności, który może być często wywoływany. Jeśli kod zostanie wywołany z odpowiednim czasem, możesz skończyć z elementem wskazującym, kiedy nie powinien (lub odwrotnie)
Chris Pfohl

122

Możesz użyć wtyczki jQuery Color .

Na przykład, aby zwrócić uwagę na wszystkie elementy div na swojej stronie, możesz użyć następującego kodu:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

Edytuj - Nowe i ulepszone

Poniższy używa tej samej techniki, co powyżej, ale ma dodatkowe zalety:

  • sparametryzowany kolor podświetlenia i czas trwania
  • zachowując oryginalny kolor tła, zamiast zakładać, że jest biały
  • jest rozszerzeniem jQuery, dzięki czemu można go używać na dowolnym obiekcie

Rozszerz obiekt jQuery:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

Przykład użycia:

$("div").animateHighlight("#dd0000", 1000);

4
Dla mnie też nie działa - czy na pewno nie zależy to od wtyczki kolorowych animacji? plugins.jquery.com/project/color
UpTheCreek

18
Z dokumentów jquery na .animate (): Wszystkie właściwości animowane powinny mieć pojedynczą wartość liczbową (z wyjątkiem przypadków wymienionych poniżej); właściwości nienumeryczne nie mogą być animowane przy użyciu podstawowej funkcji jQuery. (Na przykład szerokość, wysokość lub lewo mogą być animowane, ale kolor tła nie może być.) Więc myślę, że używasz wtyczki, nie zdając sobie z tego sprawy.
UpTheCreek,

4
Zauważyłem, że nie zwrócił obiektu. Próbowałem ułożyć ten niewielki efekt (EG: $ („# qtyonhand”). AnimateHighlight („# c3d69b”, 1500). Opóźnienie (1500) .animateHighlight („# 76923C”, 5000);) i dostałem błąd. Musiałem dodać „zwróć to”; do końca metody.
Sage

2
Oficjalne dokumenty jQuery mówią, że musisz do tego użyć wtyczki jQuery.Color (): github.com/jquery/jquery-color
jchook

3
Z jquery .animate docs: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Jeśli chcesz animować kolor, POTRZEBUJESZ jQuery UI lub innej wtyczki.
Adam Tomat,

101

Możesz użyć animacji css3 do flashowania elementu

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

I ty jQuery, aby dodać klasę

jQuery(selector).addClass("flash");

Ładne rozwiązanie, jeśli musi działać tylko raz. Po dodaniu klasy kolejne jej dodanie (logicznie) nie powoduje flashowania elementu.
simon

7
Najlepszy pomysł na świecie. Użyłem ustalonego czasu, aby usunąć klasę 2 sekundy po efekcie
insign

6
Oto przykład usunięcia klasy po zakończeniu animacji, abyś mógł nadal ją flashować. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Świetnie, to działa, ale pamiętaj, że poprawną właściwością koloru tła jest „przezroczysty” zamiast „brak”, jeśli chcesz przekazać walidator arkusza stylów.
Jan M

1
Zauważ, że wszystkie współczesne przeglądarki obsługują teraz zwykłe @keyframesi animationreguły, więc nie trzeba używać żadnych prefiksowanych wersji poza tym, że może -webkit- (dla przeglądarki Blackberry).
coredumperror

74

Po 5 latach ... (I nie jest wymagana dodatkowa wtyczka)

Ten „pulsuje” do pożądanego koloru (np. Białego), umieszczając za nim kolor tła div , a następnie wygaszając i ponownie wprowadzając obiekt.

Obiekt HTML (np. Przycisk):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (waniliowy, bez innych wtyczek):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

element - nazwa klasy

pierwsza liczba w fadeTo()milisekundach dla przejścia

Druga liczba , w fadeTo()- zmętnienie obiektu po zanikania / unfade

Możesz to sprawdzić w prawym dolnym rogu tej strony: https://single.majlovesreg.one/v1/

Edycja (willsteel) bez powielonego selektora za pomocą $ (this) i poprawionych wartości w celu automatycznego wykonania flashowania (zgodnie z żądaniem PO).


60
fadeTo(0000)- Metallica
vulcan raven

2
Gładki jak masło! Najlepsze rozwiązanie ze wszystkich. Dzięki!
ColdTuna

1
jak zrobić to w nieskończoność?
tomexsans

1
Uszkodzony przykładowy link.
meshy

1
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Możesz wtedy nazwać to tak $('#mydiv').flashUnlimited();- robi to, co odpowiedział Majal powyżej, i nazywa się ponownie na końcu cyklu.
Jay Dadhania,

46

Chyba możesz użyć efektu podświetlenia w interfejsie jQuery, aby osiągnąć to samo.


8
Jest to część jQueryUI, która jest dość ciężka, nie jest częścią standardowej biblioteki jQuery (chociaż można po prostu użyć rdzenia efektów interfejsu użytkownika, na którym się opiera).
UpTheCreek,

3
Możesz pobrać tylko rdzeń efektów + pożądany efekt, który dla „podświetlenia” + „pulsacji” wynosi 12 KB. Nie całkiem lekki, ale też nie taki ciężki.
Roman Starkov,

45

Jeśli używasz jQueryUI, jest pulsatefunkcja wUI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate


1
@DavidYell, otwórz nowe pytanie i opublikuj przykładowy kod. pulsatedziała dobrze w Chrome.
SooDesuNe

Miga co 5 sekund: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.

@all Czy ktoś teraz korzysta z animacji i / lub transformacji css3? W każdym razie fajne (ale nadal wolę css3 jak w jednej z innych odpowiedzi)
Martin Meeser

18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

1
To jest po prostu proste i eleganckie.
Gra

Używając fadeIni fadeOutwpływając na inne elementy rodzeństwa, ponieważ przełącza on displaywłaściwość css , w moim przypadku wygląda to dziwnie. Ale to rozwiązuje problem. Dzięki, działa elegancko jak urok.
fsevenm

15

Możesz użyć tej wtyczki (umieść ją w pliku js i użyj za pomocą skryptu)

http://plugins.jquery.com/project/color

A następnie użyj czegoś takiego:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

Dodaje to metodę „flash” do wszystkich obiektów jQuery:

$( '#importantElement' ).flash( '255,0,0', 1000 );

12

Możesz rozszerzyć metodę Desheng Li, pozwalając liczeniu iteracji na wykonanie wielu błysków w następujący sposób:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

Następnie możesz wywołać metodę z czasem i liczbą błysków:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

Zmieniono na var iterationDuration = Math.floor(duration / iterations);, aby można było podzielić przez liczby nieparzyste i sprawił, return this;że można po nim połączyć inne metody.
user1477388,

To tak naprawdę nie zmienia koloru czegokolwiek?
noce

12

Czyste rozwiązanie jQuery.

(nie wymaga jquery-ui / animate / color.)

Jeśli wszystko, czego chcesz, to żółty efekt „flashowania” bez ładowania koloru jquery:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

Powyższy skrypt po prostu powoduje żółte zanikanie 1s, idealne do poinformowania użytkownika, że ​​element został zaktualizowany lub coś podobnego.

Stosowanie:

flash($('#your-element'))

Uwielbiam to rozwiązanie, ale tło nie wraca do tego, co kiedyś
MrPHP

7

To może być bardziej aktualna odpowiedź i jest krótsza, ponieważ od czasu tego postu sprawy zostały nieco skonsolidowane. Wymaga podświetlenia efektu jquery-ui .

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

http://docs.jquery.com/UI/Effects/Highlight


7

Co powiesz na naprawdę prostą odpowiedź?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

Miga dwa razy ... to wszystko ludzie!


To nie miga w innym kolorze (który został zgłoszony), to po prostu zaciera krycie.
Tim Eckel

6

Nie mogę uwierzyć, że nie ma jeszcze tego pytania. Wszystko co musisz zrobić:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

To robi dokładnie to, co chcesz, jest super łatwe, działa zarówno dla, jak show()i hide()metod.


15
Uwaga: aby to zadziałało, musisz dodać efekty interfejsu jquery. nie jest częścią podstawowego jQuery
Travis-146

6

Czy efekt pulsu(offline) Wtyczka JQuery jest odpowiednia dla tego, czego szukasz?

Możesz dodać czas ograniczenia efektu pulsu w czasie.


Jak wspomniał JP w komentarzach, jest teraz jego zaktualizowana wtyczka impulsowa .
Zobacz jego repozytorium GitHub . A oto demo .



Demo jest zepsute, ponieważ biblioteka js, do której się odnosi, nie istnieje
PandaWood

@PandaWood Przywróciłem link do repozytorium GitHub i zaktualizowałem demo
VonC

6
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

1
Dokładnie. Prosta i pełna kontrola nad pojawianiem się i zanikaniem.
pollaris,

5

Znalazłem tak wiele księżyców później, ale jeśli kogo to obchodzi, wygląda na to, że jest to dobry sposób na trwałe flashowanie:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

4

Poniższe kody działają dla mnie. Zdefiniuj dwie funkcje wejścia i wyjścia i umieść je w wywołaniu zwrotnym.

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

Poniższe kontroluje czasy błysków:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

4

Szukałem rozwiązania tego problemu, ale bez polegania na interfejsie jQuery.

Właśnie to wymyśliłem i działa dla mnie (bez wtyczek, tylko Javascript i jQuery); - Oto działające skrzypce - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Ustaw bieżący parametr CSS w pliku CSS jako normalny css i utwórz nową klasę, która po prostu obsługuje parametr do zmiany, tj. Kolor tła, i ustaw go na „! Ważne”, aby zastąpić domyślne zachowanie. lubię to...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

Następnie użyj poniższej funkcji i podaj element DOM jako ciąg, liczbę całkowitą, ile razy chcesz, aby wystąpił flash, klasę, na którą chcesz zmienić, oraz liczbę całkowitą dla opóźnienia.

Uwaga: Jeśli podasz parzystą liczbę dla zmiennej „times”, skończysz z klasą, od której zacząłeś, a jeśli podasz nieparzystą liczbę, skończysz z przełączaną klasą. Oba są przydatne do różnych rzeczy. Używam „i”, aby zmienić czas opóźnienia, w przeciwnym razie wszystkie strzelałyby w tym samym czasie, a efekt zostałby utracony.

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.  

3

Podobnie jak fadein / fadeout, możesz użyć animacji css / delay

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

Prosty i elastyczny


3
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 to 3 sekundy

Z krycia 1 jest wyblakłe do 0,3, następnie do 1 i tak dalej.

Możesz układać ich więcej.

Potrzebne jest tylko jQuery. :)


2

Istnieje obejście problemu z animowanym błędem w tle. Ta lista zawiera przykład prostej metody podświetlania i jej zastosowania.

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
  fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231


2

Jeśli dołączenie biblioteki jest przesadą, jest to rozwiązanie, które z pewnością działa.

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});
  1. Ustaw wyzwalacz zdarzenia

  2. Ustaw kolor tła elementu bloku

  3. Wewnątrz setTimeout użyj fadeOut i fadeIn, aby stworzyć mały efekt animacji.

  4. Wewnątrz drugiego setTimeout zresetuj domyślny kolor tła

    Testowany w kilku przeglądarkach i działa dobrze.


2

Niestety najlepsza odpowiedź wymaga interfejsu użytkownika JQuery. http://api.jquery.com/animate/

Oto waniliowe rozwiązanie JQuery

http://jsfiddle.net/EfKBg/

JS

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

CSS

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

HTML

<div class="hello">Hello World!</div>

Jeśli po prostu flashutworzysz obiekt jQuery, działa dobrze. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn

1

Oto nieco ulepszona wersja rozwiązania colbeerhey. Dodałem instrukcję return, dzięki czemu w prawdziwej formie jQuery łączymy zdarzenia po wywołaniu animacji. Dodałem również argumenty, aby wyczyścić kolejkę i przejść do końca animacji.

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

Uwaga: animowanie kolorów tła wymaga użycia wtyczki UI kolorów. patrz: api.jquery.com/animate
Martlark

1

Ten będzie pulsował kolorem tła elementu, dopóki nie zostanie wywołane zdarzenie najechania kursorem myszy

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}

1

Złóż to ze wszystkich powyższych - łatwe rozwiązanie do flashowania elementu i powrót do oryginalnego bgcolour ...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

Użyj w ten sposób:

$('<some element>').flash('#ffffc0', 1000, 3);

Mam nadzieję że to pomoże!


Uważaj na zło eval!
Birla,

Wiem, potrzebowałem tylko szybkiego i brudnego rozwiązania. Eval ma czasem zastosowania!
Duncan

1

Oto rozwiązanie wykorzystujące połączenie animacji jQuery i CSS3.

http://jsfiddle.net/padfv0u9/2/

Zasadniczo zaczynasz od zmiany koloru na „flashowy”, a następnie użyj animacji CSS3, aby pozwolić, aby kolor zniknął. Musisz zmienić czas przejścia, aby początkowe „flashowanie” było szybsze niż zanikanie.

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

Gdzie klasy CSS są następujące.

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}


1

Jest to na tyle ogólne, że możesz napisać dowolny kod, który chcesz animować. Możesz nawet zmniejszyć opóźnienie z 300ms do 33ms i zanikać kolory itp.

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}

1

możesz użyć wtyczki JQuery Pulsate, aby wymusić skupienie uwagi na dowolnym elemencie HTML z kontrolą prędkości, powtarzalności i koloru.

JQuery.pulsate () * z wersjami demonstracyjnymi

przykładowy inicjator:

  • $ (". pulse4"). pulsować ({prędkość: 2500})
  • $ (". Przycisk CommandBox: widoczny"). Pulsuje ({color: "# f00", prędkość: 200, zasięg: 85, powtórz: 15})
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.