jQuery "berkedip sorot" efek pada div?


88

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.


4
Tolong jangan. Jika perlu, cukup sorot dengan efek sorotan ( docs.jquery.com/UI/Effects/Highlight ), tetapi jangan membuatnya berkedip.
tvanfosson

1
@tv Saya pikir dua atau tiga "kedipan" pendek (di mana "kedipan" mudah-mudahan sesuatu yang halus, seperti cahaya tepi animasi atau sesuatu seperti itu) baik-baik saja dan tidak menjengkelkan, tapi jelas kedipan kuno dalam jangka waktu yang lama waktu akan menjadi buruk.
Pointy

1
Hehe, saya tahu berkedip itu menyebalkan, tapi sebenarnya ada tujuan disini. Pengguna tidak diharapkan untuk duduk di dekat monitor sepanjang hari, jadi dia harus melihat apakah ada sesuatu yang berubah dari jarak jauh
ZolaKt

25
Kalian lucu sekali. Halaman web hanya digunakan untuk apa yang menurut Anda benar? Saya tidak ingin menyorot, saya perlu berkedip karena saya sedang menulis halaman monitor proses untuk dilihat di TV format besar dan perlu berkedip merah dan terus sehingga mata orang tertuju padanya.
Bmo

Jawaban:


173

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.


1
Pulsate adalah yang saya cari. Terima kasih banyak. Hanya, apakah ada cara untuk menghentikannya dari memudar sepenuhnya. Hanya untuk memudar katakanlah ke 50% opacity? Mungkin hanya untuk efek highlight berantai beberapa kali?
ZolaKt


30

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/


1
Bekerja dengan baik! Dan tidak diperlukan JQuery UI.
Pavel Vlasov

solusi yang bagus! bekerja tanpa masalah apapun menggunakan Jquery. Terima kasih
Situs digital

Ini adalah solusi terbaik di sini!
DmitryBoyko

Solusi terbaik disini!
w3spi

19

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

18

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.


1
Masih membutuhkan jQuery UI "Effects"
Jerome Jaglale

1
@JeromeJaglale Saya menggunakannya tanpa jQuery UI, karena perubahan opacity dapat dilakukan di jQuery saja. Ini harus sama untuk Anda, kecuali jika Anda menggunakan animasi khusus jQuery UI.
lulalala

1
Poin yang bagus. Saya disesatkan oleh demo pertama (teks berkedip merah) yang membutuhkan Efek UI jQuery.
Jerome Jaglale

Hanya sebuah catatan. Anda hanya perlu memasukkan jquery.color.jsuntuk bahan warna.
Dave


6

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.

1

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


0

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

0

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.


0

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


FadeOut / FadeIn menyembunyikan / menampilkan elemen pada akhirnya yang bukan yang saya cari. Saya perlu meningkatkan / menurunkan opasitas warna tanpa menyembunyikan elemen
ZolaKt

Tidak, elem.show (). Hide () melakukan itu. FadeOut / FadeIn mengubah opactity. Anda dapat mengutak-atik durasi fadeOut / fadeIn untuk mendapatkan efek yang diperlukan. Itu menyembunyikan elem sekali.
ibsenv

0

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!


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

0

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>

0

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
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.