jQuery" мигает подсветка " эффект на div?

взгляните на 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, вы можете использовать jQuery.пульс.js.

чтобы иметь циклическую анимацию изменения непрозрачности, сделайте это:

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

это свет (менее 1 Кб), и позволяет зацикливать любой вид анимации.

Если вы еще не используете библиотеку jQuery UI, и вы хотите имитировать эффект, что вы можете сделать очень просто

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

вы также можете поиграть с числами, чтобы получить более быстрый или медленный, чтобы лучше соответствовать вашему дизайну.

Это также может быть глобальная функция jquery, поэтому вы можете использовать тот же эффект на всем сайте. Также обратите внимание, что если вы поместите этот код в цикл for, у вас может быть 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. В частности, эффект подсветки:

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

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

если вы не хотите накладных расходов 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, есть также Скрипка, так что вы можете играть по своему вкусу, прежде чем реализовать его в коде.

Я использую различные предопределенные цвета, как так:

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

и использовать их так

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

легко :)

просто дайте elem.затухание(10).fadeIn(10);

попробуйте с jquery.мигать.плагин 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>