jQuery "мигающий" эффект на div?

Question

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

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

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

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

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

Answer 1

jQuery UI Highlight Effect - это то, что вы ищете.

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

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

Редактировать

Возможно, эффект Пульсата более уместен, см здесь

Редактировать # 2

Чтобы настроить непрозрачность, вы можете сделать это:

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

Так что непрозрачность не будет ниже 50%.

Answer 2

Взгляните на http://jqueryui.com/demos/effect/. У него есть эффект, названный пульсатом, который будет делать именно то, что вы хотите.

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

Answer 3

Это пользовательский эффект моргания, который использует 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/

Answer 4

Если вы еще не используете библиотеку 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

Answer 5

Для тех, кто не хочет включать весь пользовательский интерфейс jQuery, вы можете использовать jQuery.pulse.js .

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

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

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

Answer 6

Поскольку я не вижу каких-либо решений на основе 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.

Answer 7

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

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

Answer 8

Я не мог найти именно то, что искал, поэтому написал что-то настолько простое, насколько смог.Выделенный класс может быть просто цветом фона.

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

Answer 9

Проверить -

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

Answer 10

<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