Я ищу способ сделать следующее.
Я добавляю <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.color.js
цвет.Вы можете изучить пользовательский интерфейс 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
Примечание. Это решение НЕ использует пользовательский интерфейс 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 } }
источник