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

88

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

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

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

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

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

ZolaKt
источник
4
Пожалуйста, не надо. Если необходимо, просто выделите его с помощью эффекта выделения ( docs.jquery.com/UI/Effects/Highlight ), но не заставляйте его мигать.
tvanfosson 05
1
@tv Я думаю, что два или три коротких "мигания" (где "мигание" - это, надеюсь, что-то тонкое, например, анимированное свечение границы или что-то в этом роде) - это нормально и не раздражает, но определенно старомодное мигание в течение длительного периода время было бы плохим.
Pointy
1
Хе-хе, я знаю, что моргание раздражает, но на самом деле у этого есть цель. Ожидается, что пользователь не будет сидеть у монитора весь день, поэтому он должен видеть, не изменилось ли что-то на расстоянии
ZolaKt 05
25
Вы, ребята, веселые. Веб-страницы используются только для того, что вы считаете правильным? Я не хочу выделять, мне нужно мигнуть, потому что я пишу страницу монитора процесса для просмотра на широкоформатном телевизоре, и она должна мигать красным и продолжать, чтобы глаза людей были привлечены к ней.
Bmo
1
Возможный дубликат « Как сделать элемент«
мигающим

Ответы:

173

Эффект выделения 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%.

санки
источник
1
Pulsate - это то, что я ищу. Большое спасибо. Просто есть ли способ остановить его полное исчезновение. Скажем, для исчезновения до 50% непрозрачности? Может, просто несколько раз связать эффект подсветки?
ZolaKt 05
32

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

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
Альтернегро
источник
30

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

Ajey
источник
1
Работает отлично! И никакого пользовательского интерфейса JQuery не требуется.
Павел Власов
отличное решение! работает без проблем с использованием JQuery. Спасибо
Цифровой сайт
Здесь лучшее решение!
DmitryBoyko
Лучшее решение здесь!
w3spi
19

Если вы еще не используете библиотеку пользовательского интерфейса 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
Клейтон С
источник
18

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

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

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

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

Lulalala
источник
1
По-прежнему требуется jQuery UI "Effects"
Джером Джаглал
1
@JeromeJaglale Я использую его без пользовательского интерфейса jQuery, так как изменение непрозрачности можно выполнить только в jQuery. То же самое должно быть и у вас, если вы не используете анимацию, специфичную для jQuery UI.
lulalala
1
Хорошая точка зрения. Меня ввела в заблуждение первая демонстрация (мигающий красный текст), для которой требуются эффекты jQuery UI.
Джером Джаглале
Просто примечание. Вам нужно только включить jquery.color.jsцвет.
Дэйв
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.
Даниэль Исер
источник
1

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

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

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

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

легко :)

метамагикум
источник
0

Если вам не нужны накладные расходы на 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); }
    });
});
Джибран
источник
0

Думаю, вы могли бы использовать аналогичный ответ, который я дал. Вы можете найти его здесь ... https://stackoverflow.com/a/19083993/2063096

  • должен работать во всех браузерах, так как это только Javascript и jQuery.

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

SoEzPz
источник
0

просто дайте elem.fadeOut (10) .fadeIn (10);

ibsenv
источник
FadeOut / FadeIn скрывает / показывает элемент в конце, что не то, что я искал. Мне нужно было увеличить / уменьшить непрозрачность цвета, не скрывая элемент
ZolaKt
Нет, elem.show (). Hide () делает это. FadeOut / FadeIn изменяет непрозрачность. Вы можете поиграть с продолжительностью fadeOut / fadeIn, чтобы получить требуемый эффект. Однако он скрывает элемент один раз.
ibsenv
0

Попробуйте использовать плагин 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>

#наслаждаться!

Артур Араужо
источник
0
<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
Перес
источник
0

Проверьте это -

<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>
Джонни
источник
0

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

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
    }
}
Брэндон Блэквелл
источник