jQuery "nhấp nháy nổi bật" hiệu ứng trên div?

Tôi đang tìm một cách để làm như sau.

Tôi thêm a <div>vào một trang và lệnh gọi lại ajax trả về một số giá trị. Giá trị <div>này được lấp đầy bằng các giá trị từ lệnh gọi ajax, và <div>sau đó được thêm vào một giá trị khác <div>, hoạt động như một cột bảng.

Tôi muốn thu hút sự chú ý của người dùng, để cho cô ấy / anh ấy thấy rằng có điều gì đó mới trên trang.
Tôi muốn <div>nhấp nháy, không hiển thị / ẩn, nhưng để đánh dấu / bỏ sáng trong một thời gian, giả sử là 5 giây.

Tôi đã xem xét plugin nhấp nháy, nhưng theo như tôi thấy thì nó chỉ hiển thị / ẩn trên một phần tử.

Btw, giải pháp phải là trình duyệt chéo và vâng, không may là IE đã bao gồm. Tôi có thể sẽ phải hack một chút để làm cho nó hoạt động trong IE, nhưng nhìn chung thì nó phải hoạt động.

jQuery UI Highlight Effect là thứ bạn đang tìm kiếm.

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

Tài liệu và bản demo có thể được tìm thấy tại đây

Chỉnh sửa :
Có lẽ jQuery UI Pulsate Effect thích hợp hơn, xem tại đây

Chỉnh sửa # 2 :
Để điều chỉnh độ mờ, bạn có thể làm như sau:

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

... vì vậy nó sẽ không giảm bất kỳ độ mờ nào dưới 50%.

Hãy xem tại http://jqueryui.com/demos/effect/ . Nó có một hiệu ứng tên là pulsate sẽ làm chính xác những gì bạn muốn.

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

Đây là hiệu ứng nhấp nháy tùy chỉnh mà tôi đã tạo, sử dụng setIntervalvàfadeTo

HTML -

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

JS -

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


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

Đơn giản như nó nhận được.

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

Nếu bạn chưa sử dụng thư viện Jquery UI và bạn muốn bắt chước hiệu ứng, những gì bạn có thể làm rất đơn giản

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

bạn cũng có thể thử với các con số để lấy một con số nhanh hơn hoặc chậm hơn để phù hợp hơn với thiết kế của bạn.

Đây cũng có thể là một hàm jquery chung để bạn có thể sử dụng cùng một hiệu ứng trên toàn bộ trang web. Cũng lưu ý rằng nếu bạn đặt mã này trong vòng lặp for, bạn có thể có 1 triệu xung, do đó bạn không bị giới hạn ở 6 mặc định hoặc bao nhiêu mặc định.

CHỈNH SỬA: Thêm cái này làm hàm jQuery toàn cục

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

Nhấp nháy dễ dàng bất kỳ phần tử nào từ trang web của bạn bằng cách sử dụng

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

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

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

Đối với những người không muốn bao gồm toàn bộ giao diện người dùng jQuery, bạn có thể sử dụng jQuery.pulse.js để thay thế.

Để có hoạt ảnh lặp lại thay đổi độ mờ, hãy làm như sau:

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

Nó nhẹ (dưới 1kb) và cho phép bạn lặp lại bất kỳ loại hình động nào.

Bạn có thể muốn xem xét giao diện người dùng jQuery. Cụ thể, hiệu ứng nổi bật:

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

Vì tôi không thấy bất kỳ giải pháp dựa trên jQuery nào không yêu cầu thư viện bổ sung nên đây là giải pháp đơn giản linh hoạt hơn một chút so với các giải pháp sử dụng 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);
            }
        });
    });
};

Sử dụng nó như thế này

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

Tôi sử dụng các màu được xác định trước khác nhau như vậy:

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

và sử dụng chúng như thế này

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

dễ dàng :)

Nếu bạn không muốn chi phí giao diện người dùng jQuery, gần đây tôi đã viết một giải pháp đệ quy bằng cách sử dụng .animate(). Bạn có thể tùy chỉnh độ trễ và màu sắc khi bạn cần.

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

        }
    });
}

Tất nhiên, bạn sẽ cần plugin màu backgroundColorđể làm việc .animate(). https://github.com/jquery/jquery-color

Và để cung cấp một chút bối cảnh, đây là cách tôi gọi nó. Tôi cần cuộn trang đến div mục tiêu của mình và sau đó nhấp nháy nó.

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

Tôi nghĩ bạn có thể sử dụng một câu trả lời tương tự như tôi đã đưa ra. Bạn có thể tìm thấy nó ở đây ... https://stackoverflow.com/a/19083993/2063096

• sẽ hoạt động trên tất cả các trình duyệt vì nó chỉ có Javascript và jQuery.

Lưu ý: Giải pháp này KHÔNG sử dụng giao diện người dùng jQuery, cũng có một trình điều khiển để bạn có thể chơi theo ý thích của mình trước khi triển khai nó trong mã của bạn.

chỉ cần đưa ra elem.fadeOut (10) .fadeIn (10);

Hãy thử với plugin 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>

#thưởng thức!

<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

Kiểm tra nó ra -

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

Tôi không thể tìm thấy chính xác những gì tôi đang tìm kiếm vì vậy hãy viết một cái gì đó cơ bản nhất có thể. Lớp được đánh dấu có thể chỉ là màu nền.

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