jQuery ефект “миготливого виділення” на div?

Я шукаю спосіб зробити наступне.

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

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

Я розглядав модуль блимання, але, наскільки я бачу, він відображає / приховує лише елемент.

До речі, рішення має бути крос-браузерним, і так, IE, на жаль, включено. Ймовірно, мені доведеться трохи зламати, щоб це працювало в IE, але загалом це має спрацювати.

jQuery UI Highlight Effect - це те, що ви шукаєте.

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

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

Змінити :
Можливо, jQuery UI Pulsate Effect є більш відповідним, дивіться тут

Редагування # 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 або скільки за замовчуванням.

EDIT: Додавання цього як глобальної функції 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, я нещодавно написав рекурсивне рішення за допомогою .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
    }
}