Эффект «мигающего выделения» jQuery на div?

Я ищу способ сделать следующее.

Я добавляю <div>на страницу, и обратный вызов ajax возвращает некоторое значение. <div>Заполняются значениями из вызова Ajax, а <div>затем префикс к другому <div>, который действует в качестве столбца таблицы.

Я хочу привлечь внимание пользователя, показать ему, что на странице есть что-то новое.
Я хочу, <div>чтобы он мигал, а не отображал / скрывал, а выделял / убирал выделение в течение некоторого времени, скажем, 5 секунд.

Я смотрел плагин мигания, но насколько я вижу, он показывает / скрывает только элемент.

Кстати, решение должно быть кроссбраузерным, и да, IE, к сожалению, включен. Мне, вероятно, придется немного взломать, чтобы заставить его работать в IE, но в целом это должно работать.

Эффект выделения jQuery UI - это то, что вы ищете.

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

Документацию и демонстрацию можно найти здесь

Изменить :
возможно, эффект пульсации пользовательского интерфейса jQuery более уместен, см. Здесь

Изменить # 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/ . У него есть эффект под названием пульсирующий, который сделает именно то, что вы хотите.

$("#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 и хотите имитировать эффект, вы можете сделать очень просто.

$('#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, вы можете вместо этого использовать jQuery.pulse.js .

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

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

Он легкий (менее 1 КБ) и позволяет зацикливать любые анимации.

Вы можете изучить пользовательский интерфейс jQuery. В частности, эффект выделения:

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

просто дайте 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
    }
}