Yanıp sönen metin jQuery

JQuery'de metnin yanıp sönmesini sağlamanın kolay bir yolu ve onu durdurmanın bir yolu nedir? IE, FF ve Chrome için çalışmalıdır. Teşekkürler

Bu göz kırpma eklentisini kullanmayı deneyin

Örneğin

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

Aynı zamanda çok basit bir eklentidir ve muhtemelen animasyonu durdurmak ve istek üzerine başlatmak için genişletebilirsiniz.

Bir metni yanıp sönen bir eklenti, bana biraz abartılı geliyor ...

Bunu dene...

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

İşte animasyonla yanıp sönüyor:

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

sadece göz kırpmak istediğiniz ne olursa olsun bir göz kırpma sınıfı verin:

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

#jquery'de DannyZB'ye tüm saygılar

özellikleri:

• herhangi bir eklentiye ihtiyaç duymaz (ancak JQuery'nin kendisi)
• şey yapar

JQuery'yi kullanmak istemiyorsanız, bu CSS3 ile sağlanabilir.

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

Chrome'da çalışıyor gibi görünüyor, ancak hafif bir hıçkırık sesi duyduğumu düşündüm.

Yukarıdaki kodları birleştirin, bunun iyi bir çözüm olduğunu düşünüyorum.

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

En azından web sitemde çalışıyor. http://140.138.168.123/2y78%202782

Benimki burada ; size önemli olan 3 parametre üzerinde kontrol sağlar:

• hızda solma
• solma hızı
• tekrar hızı

.

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

Ayrıca standart CSS yöntemini de kullanabilirsiniz (JQuery eklentisine gerek yoktur, ancak tüm tarayıcılarla uyumludur):

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

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

W3C Bağlantısı

Ayrıca şunları da deneyebilirsiniz:

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

Bu EN KOLAY yol (ve en az kodlama ile):

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

Vaktini boşa harcamak

Şimdi, daha sofistike bir şey arıyorsanız ...

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

Vaktini boşa harcamak

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

Burada bir bulabilirsiniz jQuery göz kırpma onun hızlı ile eklenti demo .

Temel yanıp sönme ( sınırsız yanıp sönme, yanıp sönme süresi ~ 1 saniye ):

$('selector').blink();

Daha gelişmiş bir kullanımda, ayarlardan herhangi birini geçersiz kılabilirsiniz:

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

Orada maksimum yanıp sönme sayısını belirleyebilir ve birkaç geri aramaya erişebilirsiniz: onBlinkve onMaxBlinksbunlar oldukça açıklayıcıdır.

IE 7 & 8, Chrome, Firefox, Safari ve muhtemelen IE 6 ve Opera'da çalışır (her ne kadar bunlar üzerinde test edilmemiş olsa da).

(Tam açıklamayla: Ben öncekinin yaratıcısıyım. Bunu bir sistem içindeki bir alarm için işte kullanmak için meşru bir ihtiyacımız vardı [ hepimizin bunu söylemeyi sevdiğimizi biliyorum :-) ] ve paylaşmayı düşündüm yalnızca meşru bir ihtiyaçta kullanım içindir ;-)).

İşte jQuery blink eklentilerinin başka bir listesi .

bu kod benim için çalışıyor

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

JQuery UI Pulsate efektini deneyebilirsiniz:

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

En kolay yol:

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

Bunu istediğiniz kadar tekrarlayabilir veya bir döngü içinde kullanabilirsiniz. fadeTo () öğesinin ilk parametresi, fade'in etkili olma süresidir ve ikinci parametre opaklıktır.

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

IE 7 ve Safari ile çalışmaz. Firefox ile iyi çalışın

Bu bağımsız çözüm, metni belirtilen sayıda yanıp söner ve sonra durur.

Yanıp sönme, herhangi bir sorun olması durumunda DIV'nin tıklanabilir kalması için göster / gizle, solma veya geçiş yerine opaklık kullanır (yanıp sönen metinli düğmeler oluşturmanıza olanak tanır).

jsFiddle burada (ek yorumlar içerir)

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

Kaynaklar:
Danny Gimenez
Moses Christian

Yazara bağlantı

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

Ben göndermek için gidiyordu stepsböylece, -timed polyfill ama sonra ben gerçekten hiç bu etkisini görmek istemiyoruz hatırladım ...

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

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

Aşağıdakilerin diğer yanıtlardan daha fazla netlik ve özelleştirme olduğunu hissediyorum.

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

Bu kod, yalnızca opaklığa etki ederek düzene dokunmadan ( yapacağımız gibi ) öğe (ler) in etkili bir şekilde yanıp sönmesinifadeIn().fadeOut() sağlayacaktır; İşte gidiyorsun, yanıp sönen metin; hem iyi hem de kötü için kullanılabilir :)

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

Yanıp sönüyor!

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

Bu kod, bu konuya yardımcı olabilir. Basit ama kullanışlı.

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

Alex'in cevabını beğendim, bu yüzden bu, aralıksız bunun bir uzantısıdır (çünkü sonunda bu aralığı temizlemeniz ve bir düğmenin ne zaman yanıp sönmeyi durduracağını bilmeniz gerekir. Bu, jquery öğesini geçtiğiniz bir çözümdür. , yanıp sönen ofset için istediğiniz ms ve öğenin yanıp sönmesini istediğiniz sayı:

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

Bu cevaplardan bazıları oldukça karmaşık, bu biraz daha kolay:

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

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

Bu sorudaki görüşlerin sayısını ve hem yanıp sönmeyi hem de durdurmayı kapsayan cevapların eksikliğini görünce, işte: jQuery.blinker out'u deneyin ( 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();
    }
});

Aslında basit bir göz kırpma efekti için bir eklenti aşırıdır. Bu yüzden, çeşitli çözümleri denedikten sonra, bir javascript satırı ve öğeleri tam olarak nasıl kırpmak istediğimi kontrol eden bir CSS sınıfı arasında seçim yaptım (benim durumumda, göz kırpma işleminin çalışması için yalnızca arka planı şeffaf olarak değiştirmem gerekiyor, böylece metin hala görülebilir):

JS:

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

CSS:

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

Bu js fiddle'a tam örnek .

Blink işlevselliği düz javascript ile uygulanabilir, jquery eklentisi ve hatta jquery gerekmez.

Bu , temel işlevleri kullandığı için tüm tarayıcılarda çalışacaktır.

İşte kod

HTML:

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

JS Kodu:

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

ve çalışan bir keman

Bu benim için en iyi sonuç veren şeydi. JQuery fadeTo'yu kullandım çünkü bu zaten jQuery'yi bağlayan WordPress'te. Aksi takdirde, bir eklenti için başka bir http isteği eklemeden önce muhtemelen saf JavaScript içeren bir şeyi seçmiş olurdum.

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

Metnin kaç kez yanıp sönmesi gerektiğini belirtirken metin yanıp sönmesi için basit bir jquery uzantısı yazdım, umarım başkalarına yardımcı olur.

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

Düğme tıklatıldığında yanıp sönen metin başlatma ve durdurma -

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