Search code examples
jquerypulse

Fade / pulse effect as used on this site

I've tried searching but can't find a definitive answer, does anyone know what Stackoverflow uses to highlight changes to a page through that fade-in orange highlight?

Is it just a jquery fade or some sort of pulsate effect?

So for example I've a page that I change a few elements on when a user clicks in various places, I'd like to draw attention to these page updates by pulsating them like StackOverflow does.

Presume it's jquery, just not sure which effect.

Thanks.

Solution

  • After looking in the source code a bit, found the exact code that does the "pulse":

    // 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");

    You need better reverse engineering skills, especially when you have the source code.

    Take note that the body animation has a couple of vars that make sure marginTop has the proper size. This exact code is used for new users, giving the notify:

    Welcome to Q&A for professional and enthusiast programmers — check out the FAQ!