2

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.

ಠ_ಠ
  • 3,060
  • 28
  • 43
scaryjones
  • 119
  • 8

2 Answers2

2

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!

Khez
  • 10,172
  • 2
  • 31
  • 51
  • Cool thanks, and fair enough regarding improving my reverse engineering skills, I'm generally quite good at tracking these things down but couldn't see it with this one. – scaryjones Apr 09 '11 at 09:59
  • Check `master.min.js` for `showFirstTime:` and in it for `$(".module.newuser").show();` after it are 3 functions calls f(), a({message}) i(); a() just appends the notify, f() moves body and i() fades in :) – Khez Apr 09 '11 at 10:03
0

Using jquery you can do so like following:

<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);
    }); 
});
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164