jQuery div üzerinde "yanıp sönen vurgulama" efekti?

Aşağıdakileri yapmanın bir yolunu arıyorum.

<div>Bir sayfaya a eklerim ve bir ajax geri araması bir değer döndürür. <div>Ajax çağrısından değerlerle doldurulur, ve<div> daha sonra başka başına ilave edilir<div> bir tablo sütun olarak görev yapan.

Sayfada yeni bir şeyler olduğunu göstermek için kullanıcının dikkatini çekmek isterim.
<div>Göstermek / gizlemek değil, ancak bir süre vurgulamak / vurgulamak için yanıp sönmesini istiyorum, 5 saniye diyelim.

Blink eklentisine bakıyordum, ancak görebildiğim kadarıyla yalnızca bir öğe üzerinde gösteriliyor / gizleniyor.

Btw, çözüm çapraz tarayıcı olmalı ve evet, IE maalesef dahil. IE'de çalışması için muhtemelen biraz hacklemem gerekecek, ama genel olarak işe yaraması gerekiyor.

jQuery UI Highlight Effect , aradığınız şeydir.

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

Belgeler ve demo burada bulunabilir

Düzenleme :
Belki jQuery UI Pulsate Etkisi daha uygundur, buraya bakın

Düzenleme # 2 :
Opaklığı ayarlamak için şunu yapabilirsiniz:

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

... böylece% 50 opaklıktan daha aşağı gitmez.

Http://jqueryui.com/demos/effect/ adresine bir göz atın . Tam olarak istediğinizi yapacak olan pulsate adlı bir etkiye sahiptir.

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

Bu, oluşturduğum özel bir göz kırpma efektidir setIntervalvefadeTo

HTML -

<div id="box">Box</div>

JS -

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

Olabildiğince basit.

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

Jquery UI kitaplığını halihazırda kullanmıyorsanız ve efekti taklit etmek istiyorsanız, yapabilecekleriniz çok basittir.

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

Ayrıca, tasarımınıza daha iyi uyması için daha hızlı veya daha yavaş bir sayı elde etmek için sayılarla oynayabilirsiniz.

Bu aynı zamanda genel bir jquery işlevi olabilir, böylece site genelinde aynı etkiyi kullanabilirsiniz. Ayrıca, bu kodu bir for döngüsüne koyarsanız, 1 milyon darbeye sahip olabileceğinizi, bu nedenle varsayılan 6 veya varsayılanın ne kadar olduğu ile sınırlı olmadığınızı unutmayın.

DÜZENLEME: Bunu genel bir jQuery işlevi olarak ekleme

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

Aşağıdakileri kullanarak sitenizdeki herhangi bir öğeyi kolayca kırpın

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

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

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

JQuery kullanıcı arayüzünün tamamını dahil etmek istemeyenler için jQuery.pulse.js'yi kullanabilirsiniz . bunun yerine .

Opaklığı değiştiren döngü animasyonuna sahip olmak için şunu yapın:

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

Hafiftir (1kb'den az) ve her türlü animasyonu döngüye almanıza izin verir.

JQuery kullanıcı arayüzüne bakmak isteyebilirsiniz. Özellikle vurgulama efekti:

http://jqueryui.com/demos/effect/

Burada fazladan kitaplık gerektirmeyen jQuery tabanlı çözümler görmediğim için, fadeIn / fadeOut kullananlardan biraz daha esnek olan basit bir çözüm.

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

Bunu böyle kullan

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

Önceden tanımlanmış farklı renkler kullanıyorum:

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

ve onları böyle kullan

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

kolay :)

JQuery kullanıcı arayüzünün ek yükünü istemiyorsanız, kısa süre önce .animate(). Gecikmeleri ve renkleri istediğiniz gibi özelleştirebilirsiniz.

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

        }
    });
}

Elbette backgroundColorçalışmak için renk eklentisine ihtiyacınız olacak .animate(). https://github.com/jquery/jquery-color

Ve biraz bağlam sağlamak için onu böyle adlandırdım. Sayfayı hedef bölümüme kaydırmam ve ardından göz kırpmam gerekiyordu.

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

Sanırım verdiğim cevabın benzerini kullanabilirsin. Burada bulabilirsiniz ... https://stackoverflow.com/a/19083993/2063096

• sadece Javascript ve jQuery olduğu için tüm tarayıcılarda çalışmalıdır.

Not: Bu çözüm jQuery UI KULLANMAZ, ayrıca bir keman da vardır, böylece kodunuza uygulamadan önce beğeninize göre oynayabilirsiniz.

sadece elem.fadeOut (10) .fadeIn (10);

Jquery.blink.js eklentisiyle deneyin:

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>

#zevk almak!

<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

Kontrol edin -

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

Tam olarak aradığımı bulamadım, bu yüzden yapabileceğim kadar basit bir şey yazdım. Vurgulanan sınıf yalnızca bir arka plan rengi olabilir.

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