JQuery'de bir öğeyi nasıl "flash" yaparsınız


249

Ben jQuery yepyeni ve Prototip kullanma deneyimim var. Prototipte, bir öğeyi "flaşlamak" için bir yöntem vardır - örn. kısaca başka bir renkte vurgulayın ve kullanıcının gözünün ona çekilmesi için normale dönmesini sağlayın. JQuery'de böyle bir yöntem var mı? FadeIn, fadeOut ve animate görüyorum, ancak "flash" gibi bir şey görmüyorum. Belki de bu üç taneden biri uygun girdilerle kullanılabilir?


4
Bu $.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); } };
OP'ye

3
bu css öğesini öğeye ekleyin: text-decoration:blinksonra kaldırın.
Dementic


Buraya bulduğumdan daha iyi bir cevap olduğunu düşündüğüm bir JSFiddle demosunu koydum: stackoverflow.com/a/52283660/470749
Ryan

Göz kırpma işleminin resmi olarak animasyonlar lehine kaldırıldığını lütfen unutmayın . Şurada
OrizG

Yanıtlar:


318

Benim yolum .fadein, .fadeout .fadein, .fadeout ......

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


14
En güzel çözüm değil, kısa, anlaşılması kolay ve kullanıcı arayüzü / efekt gerektirmiyor. Güzel!
Chris Jaynes

21
Ben fadeIn önce bir gecikme kullanın, fadeOut dizisi, gibi bir şey $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
yanıp sönen arka planlar genellikle yapışkan veya sadece düz bir sarsıntı gibi görünür - özellikle yanıp sönen öğe düz beyaz bir arka plan üzerinde oturuyorsa. renk eklentileri eklemeden ve arka planları vb. yanıp sönmeye çalışmadan önce bunu deneyin
Simon_Weaver

4
Bu yöntemin problemi, bu olayların potansiyel olarak birbirine adım atmasıdır. Muhtemelen sonraki her fadeIn ve fadeOut'u ilgili geri çağrılarına koymalısınız. Örneğin: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

Bunu sıkça çağrılabilecek doğrulama kodunda kullanmaya dikkat edin. Kod doğru zamanlamayla çağrılırsa, ne zaman olmaması gerektiğini gösteren bir elemanla
kurtarabilirsiniz

122

JQuery Color eklentisini kullanabilirsiniz .

Örneğin, sayfanızdaki tüm div'lere dikkat çekmek için aşağıdaki kodu kullanabilirsiniz:

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

Düzenle - Yeni ve geliştirilmiş

Aşağıdakiler yukarıdaki ile aynı tekniği kullanır, ancak ek faydaları vardır:

  • parametreli vurgu rengi ve süresi
  • beyaz olduğunu varsaymak yerine orijinal arka plan rengini korumak
  • jQuery'nin bir uzantısı olmak, böylece herhangi bir nesnede kullanabilirsiniz

JQuery Nesnesini genişletin:

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

Kullanım örneği:

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

4
Benim için de çalışmıyor - bunun renkli animasyonlar eklentisine dayanmadığından emin misiniz? plugins.jquery.com/project/color
UpTheCreek

18
.Animate () üzerindeki jquery docs dosyasından: Tüm animasyonlu özellikler tek bir sayısal değer olmalıdır (aşağıda belirtilenler hariç); sayısal olmayan özellikler temel jQuery işlevselliği kullanılarak canlandırılamaz. (Örneğin, genişlik, yükseklik veya sol animasyonlu olabilir, ancak arka plan rengi olamaz.) Yani sanırım bir eklentiyi fark etmeden kullanıyorsunuz.
UpTheCreek

4
Bir nesne döndürmedi fark ettim. Bu küçük efekti istiflemeyi denedim (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) ve bir hata aldım. "Bu dönüş;" eklemek gerekiyordu yöntemin sonuna kadar.
Sage

2
: Resmi jQuery Dokümanlar işe bunun için eklentisi jQuery.Color () kullanması gerekir ki github.com/jquery/jquery-color
jchook

3
Jquery .animate dokümanlar: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Rengi canlandırmak istiyorsanız, jQuery UI veya başka bir eklentiye ihtiyacınız var.
Adam Tomat

101

Bir öğeyi flaş etmek için css3 animasyonlarını kullanabilirsiniz

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

Ve sen sınıf eklemek için jQuery

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

Güzel bir çözüm, sadece bir kez çalışması gerekiyorsa. Sınıf eklendikten sonra, sınıfın eklenmesi (mantıksal olarak) öğenin yanıp sönmesine neden olmaz.
simon

7
Şimdiye kadarki en iyi fikir.
Etkiden

6
İşte, animasyon tamamlandıktan sonra sınıfı kaldırmaya bir örnek, böylece yanıp sönmeye devam edebilirsiniz. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Harika, işe yarıyor, ancak bir stil sayfası doğrulayıcısını geçmek istiyorsanız, arka plan rengi için doğru özelliğin 'hiçbiri' yerine 'şeffaf' olduğuna dikkat edin.
Jan M

1
Tüm modern tarayıcıların artık normal @keyframesve animationkuralları desteklediğini unutmayın , bu nedenle belki de -webkit- (Blackberry tarayıcısı için) ön ekli sürümler kullanmaya gerek yoktur .
coredumperror

75

5 yıl sonra ... (Ek bir eklenti gerekmez)

Bu , arkasına bir div arka plan rengi koyarak ve ardından nesneyi dışarı ve tekrar soltarak istediğiniz renge (örneğin beyaz) "vurur" .

HTML nesnesi (örn. Düğme):

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

jQuery (vanilya, başka eklenti yok):

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

element - sınıf adı

İlk numara olarak fadeTo()- geçiş milisaniye

İkinci sayı olarak fadeTo()solmaya / unfade sonra nesnenin bir opaklık -

Bunu bu web sayfasının sağ alt köşesinden kontrol edebilirsiniz: https://single.majlovesreg.one/v1/

$ (This) ve ayarlanmış değerleri flaş kullanarak (OP'nin istediği gibi) flaş yapmak için çoğaltılmış seçiciyi düzenle (willsteel).


60
fadeTo(0000)- Metallica
vulcan raven

2
Tereyağı kadar pürüzsüz! En iyi çözüm. Teşekkürler!
ColdTuna

1
bu sonsuz nasıl yapılır?
tomexsans

1
Örnek bağlantı koptu.
18'de mesh

2
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Daha sonra şöyle diyebilirsiniz $('#mydiv').flashUnlimited();- Majal'ın yukarıda cevapladığı şeyi yapar ve döngü sonunda tekrar arar.
Jay Dadhania

46

Sanırım, bunu elde etmek için jQuery UI'de vurgu efektini kullanabilirsiniz .


8
Bu, oldukça ağır olan jQueryUI'nin bir parçasıdır, standart jQuery Kütüphanesi'nin bir parçası değildir (ancak sadece kullandığı UI efekt çekirdeğini kullanabilirsiniz).
UpTheCreek

3
Sadece efekt çekirdeğini + istediğiniz efekti indirebilirsiniz, "vurgu" + "titreşimli" için 12 KB'dir. Tamamen hafif değil, ama o kadar da ağır değil.
Roman Starkov

45

Eğer jQueryUI kullanıyorsanız, orada pulsatefonksiyon içindeUI/Effects

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

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


1
@DavidYell, yeni bir soru açın ve bazı örnek kodlar gönderin. pulsateChrome'da iyi çalışır.
SooDesuNe

Her 5 saniyede bir yanıp söner: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.

@all Bu css3 animasyonları ve / veya dönüşüm kullanıyorsa şimdi kimse var mı? Yine de güzel (ama yine de diğer cevaplardan birinde olduğu gibi
css3'ü

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

1
Bu sadece basit ve zariftir.
Gra

Kullanırken fadeInve fadeOutdiğer kardeş öğeleri etkiler çünkü css displayözelliğini değiştirir, benim durumumda garip görünüyorsun. Ama bu sorunu çözüyor. Teşekkürler, zarif bir cazibe gibi çalışır.
fsevenm

15

Bu eklentiyi kullanabilirsiniz (bir js dosyasına koyun ve script-tag ile kullanabilirsiniz)

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

Ve sonra böyle bir şey kullanın:

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

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

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

}

Bu, tüm jQuery nesnelerine bir 'flash' yöntemi ekler:

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

12

Bir yineleme sayısının aşağıdaki gibi birden fazla flaş yapmasına izin vererek Desheng Li'nin yöntemini daha da genişletebilirsiniz:

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

Daha sonra yöntemi zaman ve yanıp sönme sayısı ile çağırabilirsiniz:

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

Olarak değiştirildi var iterationDuration = Math.floor(duration / iterations);Eğer tek sayı bölün diye ve onu yapılan return this;onun peşinden zincir başka yöntemler olabilir böylece.
user1477388

Bu gerçekten hiçbir şeyin rengini değiştirmez mi?
gece

12

Saf jQuery çözümü.

(jquery-ui / animasyonu / rengi gerekmez.)

İstediğiniz tek şey jquery rengini yüklemeden sarı "flaş" efekti ise:

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

Yukarıdaki komut dosyası, kullanıcının öğenin güncellendiğini veya benzer bir şey olduğunu bildirmek için mükemmel olan 1s sarı fadeout yapar.

Kullanımı:

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

Arka planı eskisi gibi geri gelmemesi dışında bu çözümü seviyorum
MrPHP

7

Bu mesaj daha güncel bir yanıt olabilir ve işler bu yayından bu yana biraz konsolide edildiğinden daha kısadır. Jquery-ui-effect-vurgu gerektirir .

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

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


7

Gerçekten basit bir cevaba ne dersiniz?

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

İki kez yanıp sönüyor ... hepsi bu!


Bu, başka bir renkte yanıp sönmüyor (talep edildi), bu sadece opaklığı içeri ve dışarı kayboluyor.
Tim Eckel

6

Bunun henüz bu soruda olmadığına inanamıyorum. Tek yapman gereken:

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

Bu ikisi için çalışır, süper kolaydır, bunu yapmak istiyorum tam olarak ne yapar show()ve hide()yöntemlere.


15
Not: Bunun çalışması için jquery ui efektlerinin eklenmesi gerekir. bu çekirdek jQuery bir parçası değil
travis-146

6

Bir darbe etkisi(çevrimdışı) JQuery eklentisi aradığın için uygun mu?

Nabız efektini zaman içinde sınırlamak için bir süre ekleyebilirsiniz.


Tarafından belirtildiği gibi JP yorumlarda, şimdi var onun güncellenmiş nabız eklentisi . GitHub deposuna
bakın . Ve işte bir demo .



Demo bozuldu, çünkü atıfta bulunduğu js kütüphanesi mevcut değil
PandaWood

@PandaWood GitHub repo bağlantısını geri yükledim ve demoyu güncelledim
VonC

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

1
Kesinlikle. Solma ve solma üzerinde basit ve tam kontrol.
pollaris

5

Daha sonra bu kadar çok ay buldum, ancak herkes umursarsa, bir şeyin kalıcı olarak yanıp sönmesi için güzel bir yol gibi görünüyor:

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

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

4

Aşağıdaki kodlar benim için çalışıyor. İki fade-in ve fade-out işlevini tanımlayın ve birbirlerinin geri aramasına koyun.

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

Aşağıdakiler yanıp sönme sürelerini kontrol eder:

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

Bu soruna bir çözüm arıyordum ama jQuery UI'ye güvenmeden.

Bu ben geldi ve benim için çalışıyor (eklenti yok, sadece Javascript ve jQuery); - Çalışan keman Heres - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

CSS dosyanızdaki geçerli CSS parametresini normal css olarak ayarlayın ve parametreyi yani arka plan rengini değiştirmek için işleyen yeni bir sınıf oluşturun ve varsayılan davranışı geçersiz kılmak için '! İmportant' olarak ayarlayın. bunun gibi...

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

Ardından aşağıdaki işlevi kullanın ve DOM öğesini bir dize, flaşın kaç kez olmasını istediğiniz bir tam sayı, değiştirmek istediğiniz sınıfı ve gecikme için bir tam sayı olarak iletin.

Not: 'times' değişkeni için çift bir sayı iletirseniz, başladığınız sınıfla sonuçlanırsınız ve tek bir sayı geçerseniz geçişli sınıfla sonuçlanırsınız. Her ikisi de farklı şeyler için faydalıdır. Gecikme süresini değiştirmek için 'i' kullanıyorum, yoksa hepsi aynı anda patlar ve etki kaybolur.

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

Fadein / fadeout gibi, animate css / delay kullanabilirsiniz

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

Basit ve esnek


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

3000 3 saniyedir

Opaklık 1'den 0.3'e, daha sonra 1'e ve bu şekilde soldurulur.

Bunlardan daha fazlasını istifleyebilirsiniz.

Sadece jQuery gereklidir. :)


2

Animasyonlu arka plan hatası için bir geçici çözüm var. Bu öz, basit bir vurgulama yöntemine ve kullanımına bir örnek içerir.

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

Bir kütüphane eklemek aşırıya kaçmışsa, burada çalışması garanti edilen bir çözümdür.

$('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. Olay tetikleyicisini ayarla

  2. Blok öğesinin arka plan rengini ayarlama

  3. SetTimeout içinde küçük bir animasyon efekti oluşturmak için fadeOut ve fadeIn kullanın.

  4. İkinci kümenin içinde Zaman aşımı varsayılan arka plan rengini sıfırla

    Birkaç tarayıcıda test edildi ve güzel çalışıyor.


2

Ne yazık ki en iyi yanıt JQuery UI gerektirir. http://api.jquery.com/animate/

İşte bir vanilya JQuery çözümü

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>

Sadece flashbir jQuery nesnesi yaparsanız , iyi çalışır. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn

1

İşte colbeerhey'in çözümünün biraz geliştirilmiş bir sürümü. Bir return ifadesi ekledim, böylece gerçek jQuery formunda, animasyonu çağırdıktan sonra olayları zincirliyoruz. Ayrıca kuyruğu temizlemek ve bir animasyonun sonuna atlamak için argümanlar ekledim.

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

not: arka plan renklerini canlandırmak için renk UI eklentisinin kullanılması gerekir. bkz. api.jquery.com/animate
Martlark

1

Bu, fareyle üzerine gelme etkinliği tetiklenene kadar bir öğenin arka plan rengini titreştirir

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

Bunu yukarıdakilerin hepsinden bir araya getirin - bir elemanı yanıp sönmek ve orijinal bgcolour'a geri dönmek için kolay bir çözüm ...

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

Bunun gibi kullanın:

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

Bu yardımcı olur umarım!


Kötülüğe dikkat et eval!
Birla

Biliyorum, hızlı ve kirli bir çözüme ihtiyacım vardı. Eval'ın bazen kullanımı var!
Duncan

1

İşte jQuery ve CSS3 animasyonlarının bir karışımını kullanan bir çözüm.

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

Esas olarak, rengi "flaş" renginizle değiştirerek işe başlarsınız ve daha sonra rengin solmasına izin vermek için bir CSS3 animasyonu kullanırsınız. İlk "flaşın" solmaya göre daha hızlı olması için geçiş süresini değiştirmeniz gerekir.

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

CSS sınıfları aşağıdaki gibidir.

.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

Bu, canlandırmak istediğiniz kodu yazabileceğiniz kadar geneldir. Gecikmeyi 300ms'den 33ms'ye ve solma renklerini bile azaltabilirsiniz.

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

hız ve tekrarlama ve renk kontrolü ile herhangi bir html öğesine odaklanmaya zorlamak için jquery Pulsate eklentisini kullanabilirsiniz.

Demos ile JQuery.pulsate () *

örnek başlatıcı:

  • $ (". Pulse4" ) Pulsate ({hız: 2500}).
  • $ (". CommandBox düğmesi: görünür"). Pulsate ({color: "# f00", hız: 200, erişim: 85, tekrar: 15})
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.