Membuat Teks Berkedip Dengan Jquery

Membuat Teks Berkedip Dengan Jquery - Teks berkedip atau blinking text bisa kita gunakan agar pengunjung lebih memperhatikan sebuah teks yang kita maksud. Bisa saja teks tersebut merupakan informasi penting untuk para pengunjung.

Dulu ketika awal ngeblog sekitar tahun 2012, membuat teks berkedip sangatlah mudah. Dengan menggunakan tag <blink> maka teks yang dimaksud bisa berkedip. Namun kini tag <blink> ini sudah tidak bisa digunakan lagi.

Untuk itu saya mencoba mencari cara untuk membuat teks berkedip dan menemukan sebuah plugin yang bisa kita gunakan untuk membuat blinking teks. Plugin ini cukup kecil sehingga tidak akan terlalu memberatkan loading blog. Untuk itu saya buat inline jquery-nya agar menjadi tambah ringan.

Untuk membuatnya silahkan gunakan jquery di bawah ini dan simpan di atas kode </body>


<script type="text/javascript">
//<![CDATA[
(function(e){e.fn.blink=function(t){var n={delay:500};var t=e.extend(n,t);return this.each(function(){var n=e(this);setInterval(function(){if(e(n).css("visibility")=="visible"){e(n).css("visibility","hidden")}else{e(n).css("visibility","visible")}},t.delay)})}})(jQuery);$(document).ready(function(){$(".blink").blink()})
//]]>
</script>

Untuk mengatur kecepatannya, silahkan atur pada kode angka 500 di atas.

Kemudian tambahkan class blink pada teks yang dimaksud seperti contoh di bawah ini.


<div class="blink">
Ini adalah contoh teks berkedip
</div>

Jika ingin membuat kecepatan berkedip yang berbeda pada teks lainnya, silahkan buat class yang berbeda dan tambahkan angka yang berbeda pada delay seperti pada kode yang saya marking di bawah ini. Sehingga jquerynya menjadi seperti di bawah ini.


<script type="text/javascript">
//<![CDATA[
(function(e){e.fn.blink=function(t){var n={delay:500};var t=e.extend(n,t);return this.each(function(){var n=e(this);setInterval(function(){if(e(n).css("visibility")=="visible"){e(n).css("visibility","hidden")}else{e(n).css("visibility","visible")}},t.delay)})}})(jQuery);$(document).ready(function(){$(".blink").blink();$('.blink2').blink({delay:200})})
//]]>
</script>


<div class="blink">
Ini adalah contoh teks berkedip
</div>
dan ini
<div class="blink2">
teks berkedip dengan kecepatan berbeda
</div>

Mudah bukan? Selamat mencoba...

Update:
Jika ingin membuat berhenti berkedip ketika di-hover dan berkedip lagi ketika hover dilepas seperti contoh di atas, silahkan gunakan jquery di bawah ini.

(function($)
{
        $.fn.blink = function(options)
        {
                var defaults = { delay:500 };
                var options = $.extend(defaults, options);
               
                return this.each(function()
                {
                        var obj = $(this);
                        if (obj.attr("timerid") > 0) return;
                        var timerid=setInterval(function()
                        {
                                if($(obj).css("visibility") == "visible")
                                {
                                        $(obj).css('visibility','hidden');
                                }
                                else
                                {
                                        $(obj).css('visibility','visible');
                                }
                        }, options.delay);
                        obj.attr("timerid", timerid);
                });
        }
        $.fn.unblink = function(options)
        {
                var defaults = { visible:true };
                var options = $.extend(defaults, options);
               
                return this.each(function()
                {
                        var obj = $(this);
                        if (obj.attr("timerid") > 0)
                        {
                                clearInterval(obj.attr("timerid"));
                                obj.attr("timerid", 0);
                                obj.css('visibility', options.visible?'visible':'hidden');
                        }
                });
        }
}(jQuery))

$(document).ready(function()
{
        $('.blink').blink();

        $('.blink').mouseover(function(){
            $(this).stop().unblink();
        });
        $('.blink').mouseout(function(){
            $(this).blink();
        });
    });

Source code: http://www.antiyes.com/jquery-blink-plugin

Reactions:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser