ข้อความกะพริบ jQuery

วิธีง่ายๆในการทำให้ข้อความกระพริบใน jQuery และวิธีหยุดข้อความคืออะไร? ต้องทำงานกับ IE, FF และ Chrome ขอบคุณ

ลองใช้ปลั๊กอินกะพริบนี้

ตัวอย่างเช่น

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

นอกจากนี้ยังเป็นปลั๊กอินที่เรียบง่ายมากและคุณสามารถขยายเพื่อหยุดภาพเคลื่อนไหวและเริ่มได้ตามต้องการ

ปลั๊กอินสำหรับกะพริบข้อความบางส่วนฟังดูเกินความจำเป็นสำหรับฉัน ...

ลองนี่ ...

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

นี่กะพริบพร้อมภาพเคลื่อนไหว:

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

เพียงแค่ให้คลาสกะพริบตามที่คุณต้องการกระพริบตา:

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

ทั้งหมดเกี่ยวกับ DannyZB ใน #jquery

คุณสมบัติ:

• ไม่ต้องการปลั๊กอินใด ๆ (แต่ JQuery เอง)
• ทำสิ่งนั้น

หากคุณไม่ต้องการใช้ jQuery ก็สามารถทำได้ด้วย 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; 
}

ดูเหมือนจะทำงานใน Chrome แม้ว่าฉันคิดว่าฉันได้ยินเสียงสะอื้นเล็กน้อย

รวมรหัสด้านบนฉันคิดว่านี่เป็นทางออกที่ดี

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

อย่างน้อยก็ใช้งานได้บนเว็บของฉัน http://140.138.168.123/2y78%202782

นี่ของฉัน; ช่วยให้คุณสามารถควบคุมพารามิเตอร์ 3 ตัวที่มีความสำคัญ:

• ความเร็วจางลง
• ความเร็วเลือนหาย
• ความเร็วในการทำซ้ำ

.

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

คุณยังสามารถใช้วิธี CSS มาตรฐาน (ไม่จำเป็นต้องใช้ปลั๊กอิน JQuery แต่เข้ากันได้กับเบราว์เซอร์ทั้งหมด):

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

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

ลิงก์ W3C

คุณยังสามารถลองสิ่งเหล่านี้:

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

นี่เป็นวิธีที่ง่ายที่สุด (และมีการเข้ารหัสน้อยที่สุด):

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

ซอ

ตอนนี้หากคุณกำลังมองหาสิ่งที่ซับซ้อนกว่านี้ ...

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

ซอ

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

ที่นี่คุณสามารถหาพริบ jQueryปลั๊กอินที่มีความรวดเร็วของการสาธิต

การกะพริบขั้นพื้นฐาน (กะพริบไม่ จำกัด ระยะเวลากะพริบ ~ 1 วินาที ):

$('selector').blink();

ในการใช้งานขั้นสูงคุณสามารถลบล้างการตั้งค่าใด ๆ :

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

คุณสามารถระบุจำนวนสูงสุดของการกะพริบและสามารถเข้าถึงการโทรกลับได้สองสามครั้ง: onBlinkและonMaxBlinksนั่นเป็นคำอธิบายที่ค่อนข้างชัดเจน

ทำงานได้ใน IE 7 & 8, Chrome, Firefox, Safari และอาจเป็นใน IE 6 และ Opera (แม้ว่าจะยังไม่ได้ทดสอบก็ตาม)

(ในการเปิดเผยข้อมูลทั้งหมด: ฉันเป็นผู้สร้างสิ่งนี้ก่อนหน้านี้เรามีความต้องการที่ถูกต้องตามกฎหมายที่จะใช้ในที่ทำงาน [ ฉันรู้ว่าเราทุกคนชอบพูดแบบนี้ :-) ] เพื่อเป็นการเตือนภัยภายในระบบและฉันก็คิดถึงการแบ่งปันเพียงสำหรับการใช้งานบนความต้องการที่ถูกต้องตามกฎหมาย ;-))

นี่คือรายการปลั๊กอินกะพริบ jQueryอื่น

รหัสนี้ใช้ได้สำหรับฉัน

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

คุณสามารถลองใช้ jQuery UI Pulsate effect:

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

วิธีที่ง่ายที่สุด:

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

คุณสามารถทำซ้ำได้มากเท่าที่คุณต้องการหรือใช้ภายในลูปก็ได้ พารามิเตอร์แรกของ fadeTo () คือระยะเวลาที่การจางจะมีผลและพารามิเตอร์ที่สองคือความทึบ

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

ไม่ทำงานกับ IE 7 & Safari ทำงานได้ดีกับ Firefox

โซลูชันแบบสแตนด์อโลนนี้จะกะพริบข้อความตามจำนวนครั้งที่ระบุแล้วหยุด

การกะพริบจะใช้ความทึบแทนที่จะแสดง / ซ่อนจางหรือสลับเพื่อให้ DIV ยังคงคลิกได้ในกรณีที่เคยมีปัญหา (ช่วยให้คุณสร้างปุ่มที่มีข้อความกะพริบได้)

jsFiddle ที่นี่ (มีความคิดเห็นเพิ่มเติม)

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

ที่มา:
Danny Gimenez
Moses Christian

ลิงก์ไปยังผู้เขียน

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

ฉันกำลังจะโพสต์โพstepsลีฟิลล์แบบตั้งเวลา แต่แล้วฉันก็จำได้ว่าฉันไม่อยากเห็นเอฟเฟกต์นี้เลยจริงๆ ...

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

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

ฉันรู้สึกว่าสิ่งต่อไปนี้มีความชัดเจนและปรับแต่งได้มากกว่าคำตอบอื่น ๆ

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

รหัสนี้จะทำให้องค์ประกอบกะพริบอย่างมีประสิทธิภาพโดยไม่ต้องสัมผัสกับเค้าโครง (เช่นfadeIn().fadeOut()จะทำ) เพียงแค่ทำหน้าที่กับความทึบ ไปเลยข้อความกระพริบ; ใช้ได้ทั้งดีและชั่ว :)

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

ลั่น!

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

รหัสนี้อาจช่วยในหัวข้อนี้ เรียบง่าย แต่มีประโยชน์

<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 ดังนั้นนี่คือส่วนขยายของสิ่งนั้นโดยไม่มีช่วงเวลา (เนื่องจากคุณจะต้องล้างช่วงเวลานั้นในที่สุดและรู้ว่าคุณต้องการให้ปุ่มหยุดกะพริบเมื่อใดนี่คือวิธีแก้ปัญหาที่คุณส่งผ่านในองค์ประกอบ jquery ms ที่คุณต้องการสำหรับการชดเชยการกะพริบและจำนวนครั้งที่คุณต้องการให้องค์ประกอบกระพริบ:

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

คำตอบเหล่านี้บางส่วนค่อนข้างซับซ้อนซึ่งง่ายกว่าเล็กน้อย:

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

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

เมื่อเห็นจำนวนการดูคำถามนี้และการขาดคำตอบที่ครอบคลุมทั้งการกะพริบและการหยุดมันไปที่นี่: ลองใช้jQuery.blinker ( สาธิต )

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

แท้จริงแล้วปลั๊กอินสำหรับเอฟเฟกต์การกะพริบธรรมดานั้นเกินความจำเป็น ดังนั้นหลังจากทดลองใช้วิธีแก้ปัญหาต่างๆฉันได้เลือกระหว่างหนึ่งบรรทัดของจาวาสคริปต์กับคลาส CSS ที่ควบคุมว่าฉันต้องการกะพริบองค์ประกอบอย่างไร (ในกรณีของฉันเพื่อให้การกะพริบทำงานฉันจะต้องเปลี่ยนพื้นหลังเป็นแบบโปร่งใสเท่านั้นเพื่อให้ ข้อความยังคงปรากฏให้เห็น):

JS:

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

CSS:

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

ตัวอย่างเต็มในjs fiddleนี้

ฟังก์ชันการกะพริบสามารถใช้งานได้โดยใช้จาวาสคริปต์ธรรมดาไม่มีข้อกำหนดสำหรับปลั๊กอิน jquery หรือแม้แต่ jquery

สิ่งนี้จะทำงานได้ในทุกเบราว์เซอร์เนื่องจากใช้ฟังก์ชันพื้นฐาน

นี่คือรหัส

HTML:

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

รหัส JS:

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

และซอที่ใช้งานได้

นี่คือสิ่งที่ได้ผลดีที่สุดสำหรับฉัน ฉันใช้ jQuery fadeTo เพราะมันอยู่บน WordPress ซึ่งเชื่อมโยง jQuery เข้ามาแล้วมิฉะนั้นฉันอาจจะเลือกใช้ JavaScript บริสุทธิ์ก่อนที่จะเพิ่มคำขอ http อื่นสำหรับปลั๊กอิน

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

ฉันได้เขียนส่วนขยาย jquery ง่ายๆสำหรับการกะพริบข้อความในขณะที่ระบุจำนวนครั้งที่ควรกะพริบข้อความหวังว่าจะช่วยคนอื่นได้

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

ข้อความกะพริบเริ่มและหยุดเมื่อคลิกปุ่ม -

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