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?

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

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

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}

function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }

#demo1,
#demo2 {
  text-align: center;
  font-family: Helvetica;
  background: IndianRed;
  height: 50px;
  line-height: 50px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>

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

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

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

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

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

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

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

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

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

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

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!

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.

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 .

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

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)

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

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.  

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

$("#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. :)

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

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.

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>

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

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

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!

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

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

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

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