jQuery "berkedip sorot" efek pada div?

Saya mencari cara untuk melakukan hal berikut.

Saya menambahkan a <div>ke halaman, dan callback ajax mengembalikan beberapa nilai. The <div>diisi dengan nilai-nilai dari panggilan ajax, dan <div>kemudian ditambahkan di lain <div>, yang bertindak sebagai kolom tabel.

Saya ingin mendapatkan perhatian pengguna, untuk menunjukkan kepadanya bahwa ada sesuatu yang baru di halaman tersebut.
Saya ingin <div>agar berkedip, bukan tampilkan / sembunyikan, tetapi untuk menyorot / tidak menyorot untuk beberapa waktu, katakanlah 5 detik.

Saya telah melihat plugin blink, tetapi sejauh yang saya bisa melihatnya hanya menampilkan / menyembunyikan elemen.

Btw, solusinya harus lintas-browser, dan ya, sayangnya IE disertakan. Saya mungkin harus meretas sedikit untuk membuatnya berfungsi di IE, tetapi secara keseluruhan itu harus berfungsi.

Efek Sorotan jQuery UI adalah yang Anda cari.

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

Dokumentasi dan demo dapat ditemukan di sini

Edit :
Mungkin Efek Pulsate UI jQuery lebih tepat, lihat di sini

Edit # 2 :
Untuk mengatur opacity Anda bisa melakukan ini:

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

... jadi itu tidak akan lebih rendah dari 50% opacity.

Lihatlah http://jqueryui.com/demos/effect/ . Ini memiliki efek bernama pulsate yang akan melakukan apa yang Anda inginkan.

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

Ini adalah efek kedip khusus yang saya buat, yang menggunakan setIntervaldanfadeTo

HTML -

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

JS -

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


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

Sesederhana itu.

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

Jika Anda belum menggunakan pustaka Jquery UI dan Anda ingin meniru efek yang dapat Anda lakukan sangat sederhana

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

Anda juga dapat bermain-main dengan angka untuk mendapatkan angka yang lebih cepat atau lebih lambat agar lebih sesuai dengan desain Anda.

Ini juga bisa menjadi fungsi jquery global sehingga Anda bisa menggunakan efek yang sama di seluruh situs. Perhatikan juga bahwa jika Anda memasukkan kode ini ke dalam loop for, Anda dapat memiliki 1 juta pulsa sehingga Anda tidak dibatasi ke default 6 atau berapa defaultnya.

EDIT: Menambahkan ini sebagai fungsi jQuery global

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

Kedipkan elemen apa pun dengan mudah dari situs Anda menggunakan yang berikut ini

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

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

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

Bagi mereka yang tidak ingin menyertakan seluruh jQuery UI, Anda dapat menggunakan jQuery.pulse.js .

Untuk memiliki animasi perulangan untuk mengubah opasitas, lakukan ini:

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

Ringan (kurang dari 1kb), dan memungkinkan Anda untuk mengulang segala jenis animasi.

Anda mungkin ingin melihat jQuery UI. Secara khusus, efek sorotan:

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

Karena saya tidak melihat solusi berbasis jQuery yang tidak memerlukan pustaka tambahan di sini adalah solusi sederhana yang sedikit lebih fleksibel daripada yang menggunakan 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);
            }
        });
    });
};

Gunakan seperti ini

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

Saya menggunakan warna standar yang berbeda seperti:

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

dan menggunakannya seperti ini

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

mudah :)

Jika Anda tidak menginginkan overhead jQuery UI, saya baru-baru ini menulis solusi rekursif menggunakan .animate(). Anda dapat menyesuaikan penundaan dan warna sesuai kebutuhan.

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

        }
    });
}

Tentu saja Anda memerlukan plugin warna untuk mulai backgroundColorbekerja .animate(). https://github.com/jquery/jquery-color

Dan untuk memberikan sedikit konteks, begitulah saya menyebutnya. Saya perlu menggulir halaman ke div target saya dan kemudian mengedipkannya.

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

Saya pikir Anda bisa menggunakan jawaban serupa yang saya berikan. Anda dapat menemukannya di sini ... https://stackoverflow.com/a/19083993/2063096

• harus bekerja di semua browser karena hanya Javascript dan jQuery.

Catatan: Solusi ini TIDAK menggunakan jQuery UI, ada juga biola sehingga Anda dapat bermain-main sesuai keinginan Anda sebelum menerapkannya dalam kode Anda.

berikan saja elem.fadeOut (10) .fadeIn (10);

Coba dengan plugin jquery.blink.js:

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>

#Nikmati!

<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

Lihat -

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

Saya tidak dapat menemukan dengan tepat apa yang saya cari, jadi saya menulis sesuatu yang mendasar seperti yang saya bisa. Kelas yang disorot bisa saja menjadi warna latar belakang.

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