Teks jQuery berkedip

Apa cara mudah untuk membuat teks berkedip di jQuery dan cara menghentikannya? Harus berfungsi untuk IE, FF dan Chrome. Terima kasih

Coba gunakan plugin blink ini

Sebagai contoh

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

Ini juga merupakan plugin yang sangat sederhana, dan Anda mungkin dapat memperluasnya untuk menghentikan animasi dan memulainya sesuai permintaan.

Sebuah plugin untuk mengedipkan beberapa teks terdengar agak berlebihan bagi saya ...

Coba ini...

$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 500);
});

berikut berkedip dengan animasi:

$(".blink").animate({opacity:0},200,"linear",function(){
  $(this).animate({opacity:1},200);
});

berikan saja kelas kedip apapun yang anda ingin kedip:

<div class="someclass blink">some text</div>

semuanya berkaitan dengan DannyZB di #jquery

fitur:

• tidak membutuhkan plugin apa pun (tetapi JQuery itu sendiri)
• melakukan hal itu

Jika Anda lebih suka tidak menggunakan jQuery, ini dapat dicapai dengan CSS3

@-webkit-keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

blink {
  -webkit-animation-name: blink;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s; 
}

Sepertinya berfungsi di Chrome, meskipun saya pikir saya mendengar sedikit suara isakan.

Gabungkan kode-kode di atas, menurut saya ini adalah solusi yang bagus.

function blink(selector){
    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(800);
        $(this).animate({opacity:1}, 50, function(){
        blink(this);
        });
        $(this).delay(800);
    });
}

Setidaknya itu berfungsi di web saya. http://140.138.168.123/2y78%202782

Ini milikku; ini memberi Anda kendali atas 3 parameter yang penting:

• memudar dalam kecepatan
• kecepatan fade out
• kecepatan ulangi

.

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

Anda juga dapat menggunakan cara CSS standar (tidak perlu plugin JQuery, tetapi kompatibel dengan semua browser):

// Start blinking
$(".myblink").css("text-decoration", "blink");

// Stop blinking
$(".myblink").css("text-decoration", "none");

Tautan W3C

Anda juga dapat mencoba ini:

<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>

<script>
  function startBlink(){
    window.blinker = setInterval(function(){
        if(window.blink){
           $('.blink').css('color','blue');
           window.blink=false;
         }
        else{
            $('.blink').css('color','white');
            window.blink = true;
        }
    },500);
  }

  function stopBlink(){
    if(window.blinker) clearInterval(window.blinker);
  } 
</script>

Ini adalah cara termudah (dan dengan pengkodean paling sedikit):

setInterval(function() {
    $( ".blink" ).fadeToggle();
}, 500);

Biola

Sekarang, jika Anda mencari sesuatu yang lebih canggih ...

//Blink settings
var blink = {
    obj: $(".blink"),
    timeout: 15000,
    speed: 1000
};

//Start function
blink.fn = setInterval(function () {
    blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);

//Ends blinking, after 'blink.timeout' millisecons
setTimeout(function () {
    clearInterval(blink.fn);
    //Ensure that the element is always visible
    blink.obj.fadeIn(blink.speed);
    blink = null;
}, blink.timeout);

Biola

$.fn.blink = function(times, duration) {
    times = times || 2;
    while (times--) {
        this.fadeTo(duration, 0).fadeTo(duration, 1);
    }
    return this;
};

Di sini Anda dapat menemukan plugin jQuery blink dengan demo cepatnya .

Kedipan dasar (kedipan tidak terbatas, periode kedipan ~ 1 detik ):

$('selector').blink();

Pada penggunaan yang lebih canggih, Anda dapat mengganti salah satu pengaturan:

$('selector').blink({
    maxBlinks: 60, 
    blinkPeriod: 1000,   // in milliseconds
    onBlink: function(){}, 
    onMaxBlinks: function(){}
});

Di sana Anda dapat menentukan jumlah kedipan maksimal serta memiliki akses ke beberapa panggilan balik: onBlinkdanonMaxBlinks itu cukup jelas.

Bekerja di IE 7 & 8, Chrome, Firefox, Safari dan mungkin di IE 6 dan Opera (meskipun belum diuji).

(Dalam pengungkapan penuh: Saya adalah pembuat yang sebelumnya ini. Kami memiliki kebutuhan yang sah untuk menggunakannya di tempat kerja [ Saya tahu kita semua suka mengatakan ini :-) ] untuk alarm di dalam sistem dan saya berpikir untuk berbagi hanya untuk digunakan pada kebutuhan yang sah ;-)).

Berikut adalah daftar plugin jQuery blink lainnya .

kode ini bekerja untuk saya

   $(document).ready(function () {
        setInterval(function(){
            $(".blink").fadeOut(function () {
                $(this).fadeIn();
            });
        } ,100)
    });

Anda dapat mencoba efek Pulsate UI jQuery:

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

Cara termudah:

$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);

Anda dapat mengulangi ini sebanyak yang Anda inginkan atau Anda dapat menggunakannya di dalam satu lingkaran. parameter pertama dari fadeTo () adalah durasi efek fade, dan parameter kedua adalah opacity.

$(".myblink").css("text-decoration", "blink");

tidak bekerja dengan IE 7 & Safari. Bekerja dengan baik dengan Firefox

Solusi yang berdiri sendiri ini akan mengedipkan teks beberapa kali dan kemudian berhenti.

Kedipan menggunakan opasitas, daripada tampilkan / sembunyikan, pudar atau alihkan sehingga DIV tetap dapat diklik, jika itu menjadi masalah (memungkinkan Anda membuat tombol dengan teks yang berkedip).

jsFiddle di sini (berisi komentar tambahan)

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                var init = 0;

                $('#clignotant').click(function() {
                    if (init==0) {
                        init++;
                        blink(this, 800, 4);
                    }else{
                        alert('Not document.load, so process the click event');
                    }
                });

                function blink(selector, blink_speed, iterations, counter){
                    counter = counter | 0;
                    $(selector).animate({opacity:0}, 50, "linear", function(){
                        $(this).delay(blink_speed);
                        $(this).animate({opacity:1}, 50, function(){

                            counter++;

                            if (iterations == -1) {
                                blink(this, blink_speed, iterations, counter);
                            }else if (counter >= iterations) {
                                return false;
                            }else{
                                blink(this, blink_speed, iterations, counter);
                            }
                        });
                        $(this).delay(blink_speed);
                    });
                }

                //This line must come *AFTER* the $('#clignotant').click() function !!
                window.load($('#clignotant').trigger('click'));


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="clignotant" style="background-color:#FF6666;width:500px;
    height:100px;text-align:center;">
        <br>
        Usage: blink(selector, blink_speed, iterations) <br />
        <span style="font-weight:bold;color:blue;">if iterations == -1 blink forever</span><br />
        Note: fn call intentionally missing 4th param
    </div>


</body>
</html>

Sumber:
Danny Gimenez
Moses Christian

Tautan ke penulis

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<div id="msg"> <strong><font color="red">Awesome Gallery By Anil Labs</font></strong></p> </div>

<script type="text/javascript" >
function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('#msg');
</script>

Saya akan memposting stepspolyfill dengan waktu, tetapi kemudian saya ingat bahwa saya benar-benar tidak ingin melihat efek ini, jadi…

function blink(element, interval) {
    var visible = true;

    setInterval(function() {
        visible = !visible;
        element.style.visibility = visible ? "visible" : "hidden";
    }, interval || 1000);
}

Saya merasa yang berikut ini memiliki kejelasan dan penyesuaian yang lebih baik daripada jawaban lainnya.

    var element_to_blink=$('#id_of_element_to_blink');
    var min_opacity=0.2;
    var max_opacity=1.0;
    var blink_duration=2000;
    var blink_quantity=10;
    var current_blink_number=0;

    while(current_blink_number<blink_quantity){
        element_to_blink.animate({opacity:min_opacity},(blink_duration/2),"linear");
        element_to_blink.animate({opacity:max_opacity},(blink_duration/2),"linear");
        current_blink_number+=1;
        }

Kode ini secara efektif akan membuat elemen berkedip tanpa menyentuh tata letak (seperti yang fadeIn().fadeOut()akan dilakukan) hanya dengan bertindak pada opacity; Ini dia, teks berkedip; dapat digunakan untuk kebaikan dan kejahatan :)

setInterval(function() {
  $('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);

Berkedip!

var counter = 5; // Blinking the link 5 times
var $help = $('div.help');
var blinkHelp = function() {
    ($help.is(':visible') ? $help.fadeOut(250) : $help.fadeIn(250));    
    counter--;
    if (counter >= 0) setTimeout(blinkHelp, 500);
};
blinkHelp();

Kode ini mungkin bisa membantu topik ini. Sederhana, namun bermanfaat.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        setInterval("$('#myID/.myClass').toggle();",500);
    });
</script>

Saya suka jawaban alex, jadi ini sedikit perpanjangan dari itu tanpa interval (karena Anda akan perlu menghapus interval itu pada akhirnya dan tahu kapan Anda ingin tombol berhenti berkedip. Ini adalah solusi di mana Anda meneruskan elemen jquery , ms yang Anda inginkan untuk offset berkedip dan berapa kali Anda ingin elemen berkedip:

function blink ($element, ms, times) {
    for (var i = 0; i < times; i++) {
        window.setTimeout(function () {
            if ($element.is(':visible')) {
                $element.hide();
            } else {
                $element.show();
            }
        }, ms * (times + 1));
    }
}

Beberapa dari jawaban ini cukup rumit, ini sedikit lebih mudah:

$.fn.blink = function(time) {
    var time = typeof time == 'undefined' ? 200 : time;
    this.hide(0).delay(time).show(0);
}

$('#msg').blink();

Melihat jumlah tampilan pada pertanyaan ini, dan kurangnya jawaban yang mencakup kedipan dan penghentian, ini dia: coba jQuery.blinker out ( demo ).

HTML:

<p>Hello there!</p>

JavaScript:

var p = $("p");

p.blinker();

p.bind({
    // pause blinking on mouseenter
    mouseenter: function(){
        $(this).data("blinker").pause();
    },
    // resume blinking on mouseleave
    mouseleave: function(){
        $(this).data("blinker").blinkagain();
    }
});

Memang plugin untuk efek kedip sederhana berlebihan. Jadi setelah bereksperimen dengan berbagai solusi, saya telah memilih antara satu baris javascript dan kelas CSS yang mengontrol persis bagaimana saya ingin mengedipkan elemen (dalam kasus saya agar kedip berfungsi, saya hanya perlu mengubah latar belakang menjadi transparan, sehingga teksnya masih terlihat):

JS:

$(document).ready(function () {
        setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
    });

CSS:

span.no-bg {
    background-color: transparent;
}

Contoh lengkap di biola js ini .

Fungsionalitas Blink dapat diimplementasikan dengan javascript biasa, tidak ada persyaratan untuk plugin jquery atau bahkan jquery.

Ini akan bekerja di semua browser , karena menggunakan fungsionalitas dasar

Ini kodenya

HTML:

<p id="blinkThis">This will blink</p>

Kode JS:

var ele = document.getElementById('blinkThis');
setInterval(function () {
    ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);

dan biola yang berfungsi

Inilah yang akhirnya bekerja paling baik untuk saya. Saya menggunakan jQuery fadeTo karena ini ada di WordPress, yang sudah menghubungkan jQuery masuk. Jika tidak, saya mungkin akan memilih sesuatu dengan JavaScript murni sebelum menambahkan permintaan http lain untuk plugin.

$(document).ready(function() {
    // One "blink" takes 1.5s
    setInterval(function(){
        // Immediately fade to opacity: 0 in 0ms
        $(".cursor").fadeTo( 0, 0);
        // Wait .75sec then fade to opacity: 1 in 0ms
        setTimeout(function(){
            $(".cursor").fadeTo( 0, 1);
        }, 750);
    }, 1500);
});

Saya telah menulis ekstensi jquery sederhana untuk teks berkedip sementara menentukan berapa kali itu harus mengedipkan teks, Semoga membantu orang lain.

//add Blink function to jquery 
jQuery.fn.extend({
    Blink: function (i) {
        var c = i; if (i===-1 || c-- > 0) $(this).fadeTo("slow", 0.1, function () { $(this).fadeTo("slow", 1, function () { $(this).Blink(c);  }); });
    }
});
//Use it like this
$(".mytext").Blink(2); //Where 2 denotes number of time it should blink.
//For continuous blink use -1 
$(".mytext").Blink(-1);

Teks Berkedip mulai dan berhenti saat tombol diklik -

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