Эффект затухания / пульса, используемый на этом сайте

Question

Я пробовал поиск, но не могу найти точный ответ. Кто-нибудь знает, что использует Stackru, чтобы выделить изменения на странице с помощью этой оранжевой подсветки?

Это просто затухание jquery или какой-то пульсационный эффект?

Так, например, у меня есть страница, на которой я изменяю несколько элементов, когда пользователь щелкает в разных местах, я хотел бы обратить внимание на эти обновления страницы, пульсируя их, как это делает Stackru.

Предположим, это JQuery, просто не уверен, какой эффект.

Благодарю.

Answer 1

Посмотрев немного в исходном коде, нашел точный код, который делает "пульс":

// if you have firebug, run this in the console, it will first hide all
$("#notify-container div").hide();
$("body").css('marginTop','0px');
// this actually show the pulse
$("#notify-container div").fadeIn("slow");
$("body").animate({
    marginTop: "2.5em"
}, "fast", "linear");

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

Обратите внимание, что анимация тела имеет несколько переменных, которые гарантируют, что marginTop имеет правильный размер. Этот точный код используется для новых пользователей, давая уведомление:

Добро пожаловать в Q&A для профессиональных программистов и энтузиастов - ознакомьтесь с FAQ!

Answer 2

Используя jquery, вы можете сделать так:

<input type="button" value="TEST" id="button"/>
<div id="fade" style="display:none">This is test</div>

$('#button').click(function(){
    $('#fade').fadeIn(5000,function(){
        $('#fade').fadeOut(5000);
    }); 
});