JQuery "Мигание выделения" эффект на div?

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Edit

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

Изменить # 2

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

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

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

Ответ 2

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

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

Ответ 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/

Ответ 4

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

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

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

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

Ответ 5

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

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

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

Это также может быть глобальной функцией jquery, поэтому вы можете использовать один и тот же эффект на сайте. Также обратите внимание, что если вы поместите этот код в цикл for, вы можете иметь 1 миллион импульсов, поэтому вы не ограничены значением по умолчанию 6 или по умолчанию.

Ответ 6

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

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

Ответ 7

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

Ответ 8

Если вы не хотите накладных расходов на пользовательский интерфейс jQuery, я недавно написал рекурсивное решение, используя .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); }
    });
});

Ответ 9

Я думаю, вы могли бы использовать аналогичный ответ, который я дал. Вы можете найти его здесь... fooobar.com/questions/31247/...

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

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

Ответ 10

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

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

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

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

easy:)

Ответ 11

просто введите elem.fadeOut(10).fadeIn(10);

Ответ 12

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

#enjoy!

Ответ 13

<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

Ответ 14

Проверьте -

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