jQuery "กะพริบไฮไลต์" เอฟเฟกต์บน div?

ฉันกำลังมองหาวิธีดำเนินการต่อไปนี้

ฉันเพิ่ม<div>ไปยังเพจและ ajax callback ส่งคืนค่าบางอย่าง <div>เต็มไปด้วยค่าจากการเรียกอาแจ็กซ์และ<div>จะใช้ได้แล้วไปยังอีก<div>ซึ่งทำหน้าที่เป็นคอลัมน์ของตาราง

ฉันต้องการดึงดูดความสนใจของผู้ใช้เพื่อแสดงให้เธอ / เขาเห็นว่ามีอะไรใหม่ ๆ ในหน้านี้
ฉันต้องการ<div>ให้กะพริบไม่ใช่แสดง / ซ่อน แต่เพื่อไฮไลต์ / ยกเลิกไฮไลต์ในบางครั้งสมมติว่า 5 วินาที

ฉันดูที่ปลั๊กอินกะพริบ แต่เท่าที่ฉันเห็นมันแสดง / ซ่อนในองค์ประกอบเท่านั้น

Btw การแก้ปัญหาจะต้องข้ามเบราว์เซอร์และใช่ IE รวมอยู่ด้วย ฉันอาจจะต้องแฮ็คเล็กน้อยเพื่อให้มันทำงานใน IE แต่โดยรวมแล้วมันต้องใช้งานได้

jQuery UI Highlight Effectคือสิ่งที่คุณกำลังมองหา

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

สามารถดูเอกสารและการสาธิตได้ที่นี่

แก้ไข :
บางทีjQuery UI Pulsate Effectจะเหมาะสมกว่าดูที่นี่

แก้ไข # 2 :
ในการปรับความทึบคุณสามารถทำได้:

$("div").click(function() {
  // do fading 3 times
  for(i=0;i<3;i++) {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});

... ดังนั้นจะไม่ลดความทึบต่ำกว่า 50%

ลองดูที่http://jqueryui.com/demos/effect/ มันมีเอฟเฟกต์ชื่อ pulsate ที่จะทำสิ่งที่คุณต้องการ

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});

นี่คือเอฟเฟกต์การกะพริบแบบกำหนดเองที่ฉันสร้างขึ้นซึ่งใช้ setIntervalและfadeTo

HTML -

<div id="box">Box</div>

JS -

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

ง่ายอย่างที่คิด

http://jsfiddle.net/Ajey/25Wfn/

หากคุณยังไม่ได้ใช้ไลบรารี Jquery UI และคุณต้องการเลียนแบบเอฟเฟกต์สิ่งที่คุณทำได้นั้นง่ายมาก

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

คุณยังสามารถเล่นกับตัวเลขเพื่อให้เร็วขึ้นหรือช้าลงเพื่อให้เหมาะกับการออกแบบของคุณได้ดีขึ้น

นอกจากนี้ยังสามารถเป็นฟังก์ชัน jquery ส่วนกลางเพื่อให้คุณสามารถใช้เอฟเฟกต์เดียวกันในเว็บไซต์ โปรดทราบว่าหากคุณใส่รหัสนี้ใน for loop คุณสามารถมีพัลส์ได้ 1 ล้านครั้งดังนั้นคุณจะไม่ถูก จำกัด ไว้ที่ 6 เริ่มต้นหรือค่าเริ่มต้นเท่าไหร่

แก้ไข: การเพิ่มสิ่งนี้เป็นฟังก์ชัน jQuery ส่วนกลาง

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

กะพริบองค์ประกอบใด ๆ จากไซต์ของคุณได้อย่างง่ายดายโดยใช้สิ่งต่อไปนี้

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

สำหรับผู้ที่ไม่ต้องการรวม jQuery UI ทั้งหมดคุณสามารถใช้jQuery.pulse.jsแทนได้

หากต้องการมีภาพเคลื่อนไหวแบบวนซ้ำของการเปลี่ยนความทึบให้ทำสิ่งนี้:

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

มีน้ำหนักเบา (น้อยกว่า 1kb) และช่วยให้คุณเล่นภาพเคลื่อนไหวประเภทใดก็ได้

คุณอาจต้องการดู jQuery UI โดยเฉพาะเอฟเฟกต์ไฮไลต์:

http://jqueryui.com/demos/effect/

เนื่องจากฉันไม่เห็นโซลูชันที่ใช้ jQuery ใด ๆ ที่ไม่ต้องใช้ไลบรารีเพิ่มเติมนี่เป็นวิธีง่ายๆที่มีความยืดหยุ่นมากกว่าที่ใช้ 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);
            }
        });
    });
};

ใช้แบบนี้ครับ

$('#element').blink(3); // 3 Times.

ฉันใช้สีที่กำหนดไว้ล่วงหน้าที่แตกต่างกันดังนี้:

theme = {
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
};

และใช้แบบนี้

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);

ง่าย :)

หากคุณไม่ต้องการโอเวอร์เฮดของ jQuery UI ฉันเพิ่งเขียนโซลูชันแบบวนซ้ำโดยใช้.animate(). คุณสามารถปรับแต่งความล่าช้าและสีได้ตามที่คุณต้องการ

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

        }
    });
}

แน่นอนว่าคุณจะต้องมีปลั๊กอินสีเพื่อbackgroundColorใช้งาน.animate()ได้ https://github.com/jquery/jquery-color

และเพื่อให้บริบทเล็กน้อยนี่คือวิธีที่ฉันเรียกมัน ฉันต้องการเลื่อนหน้าไปยัง div เป้าหมายของฉันแล้วกระพริบตา

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});

ฉันคิดว่าคุณสามารถใช้คำตอบที่คล้ายกันที่ฉันให้ไว้ คุณสามารถค้นหาได้ที่นี่ ... https://stackoverflow.com/a/19083993/2063096

• ควรทำงานบนเบราว์เซอร์ทั้งหมดเนื่องจากมีเพียง Javascript และ jQuery

หมายเหตุ: โซลูชันนี้ไม่ได้ใช้ jQuery UI นอกจากนี้ยังมีซอเพื่อให้คุณสามารถเล่นได้ตามต้องการก่อนที่จะนำไปใช้ในโค้ดของคุณ

เพียงแค่ให้ elem.fadeOut (10) .fadeIn (10);

ลองใช้ปลั๊กอิน 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>

#สนุก!

<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

ลองดูสิ -

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

ฉันไม่พบสิ่งที่ต้องการอย่างแท้จริงจึงเขียนบางอย่างที่เป็นพื้นฐานเท่าที่จะทำได้ ชั้นเรียนที่ไฮไลต์อาจเป็นเพียงสีพื้นหลัง

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