JQuery / JS / ASP - Make an element (div) fade out like StackOverflow

Question

On the StackOverflow website, you will see your “Notifications” indicator in the upper left. When someone answers your question / answer, you click on the notification and it directs you to that particular answer, then displays with an orange background and slowly fades to white so you know which answer you are looking at. I would like to know how I can achieve this attenuation method.

The element I would like to execute is a div. The following shows how my DIVS are organized as they are dynamically created by ASP:

... <div id="1046" class="photoBlob">........</div> <div id="1047" class="photoBlob">........</div> <div id="1048" class="photoBlob">........</div> ... 

As you can see, it already contains styles (class = "photoBlob"), the background is transparent to the mouse when it changes to gray.

The specific DIV I need to execute comes from the query string (photos.asp? PhotoID = 1047). What I mean by the flash is to change the background of the DIV to a color (# 19426E), and then fade that color to transparent after 2 seconds.

Perhaps I could handle this if there was one DIV, and I knew that the DIV ID would blink, but based on the query string, I have no idea what I'm doing. I would appreciate any suggestions, examples or snippets to get me started with this. I think I found jQuery plugins for blinking elements, but even then, how can I feed this plugin with my 'photoID' query string, my JS is clearly rubbish!

Thank you very much

MY ANSWER - thanks (150PoundsOfDonamite)

I really made a mistake, my div id did NOT come from the query string, it came from the URL binding / hash. So, thanks to the accepted answer (below), I managed to get this job - and the business looks!

I added the jQuery plugin: http://www.bitstorm.org/jquery/color-animation/

Then I added this jQuery / Javascript:

 $(document).ready(function() { var flashDiv = window.location.hash; if(flashDiv!==false) { setTimeout(function() { $(flashDiv).animate({backgroundColor: '#19426E'}, 2000); $(flashDiv).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); }, 1000); } }); 

Answer 1

You can do this with this jQuery animation plugin . Of course, it is assumed that you are using jQuery. If your javascript skills are not as strong as you would like, jQuery is a good place to start. Do not get me wrong, this is not a substitute for learning pure javascript, but for you it is a lot.

Color animation based on the John Resig color animation plugin, but adds rgba support so you can get your transparency. You can also animate text colors and borders.

To get the photo id from the query string, you can use such a function (which I found in SO here ), but I personally find the def (default) argument is useful when I want to set the return value automatically when name not found in the query string :

 function getParameterByName(name, def) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regexS = "[\\?&]" + name + "=([^&#]*)", regex = new RegExp(regexS), results = regex.exec(window.location.href); if(results == null) return def; else return decodeURIComponent(results[1].replace(/\+/g, " ")); } 

Put this anywhere in your script tag. Then, to get your parameter and release it, place it where you need it (for example, the head tag). Here, I assume that you will want to do this using the Ready document (when the DOM elements of the page are loaded), but you can also postpone it a bit or wait until the hover or some other event .:

 $(document).ready(function() { var flashDiv = getParameterByName("photoID", false); if(flashDiv!==false) { $("#"+flashDiv).animate({backgroundColor: '#19426E'}, 2000); $("#"+flashDiv).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); } }); 

If you want to postpone this 2 seconds after the page loads:

 $(document).ready(function() { var flashDiv = getParameterByName("photoID", false); if(flashDiv!==false) { setTimeout(function() { $("#"+flashDiv).animate({backgroundColor: '#19426E'}, 2000); $("#"+flashDiv).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); }, 2000); } }); 

And if you want to wait for the user to go to this (but only once):

 $(document).ready(function() { var flashDiv = getParameterByName("photoID", false); if(flashDiv!==false && !flashed) { $("#"+flashDiv).one("mouseover", function() { $(this).animate({backgroundColor: '#19426E'}, 2000); $(this).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); }); } }); 

Update after comment:

Getting your photo after # is even easier (you won’t need the getParameterByName function, of course):

 $(document).ready(function() { var photoId = document.location.href.split("#")[1]; if(photoId!==undefined) { $("#"+photoId).animate({backgroundColor: '#19426E'}, 2000); $("#"+photoId).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); } }); 

Answer 2

There is a color fader here, a license for the creative community.
http://www.scriptiny.com/2008/05/javascript-color-fading-script/

I improved this code to support transparency.

working demo: http://jsbin.com/eceriv

no jquery, mootools or any other structure is required.

An interesting part of the code looks like this:

 // incrementally close the gap between the two colors function animateColor(element,property) { var i, rgb, fadeState = element.fadeState; if (fadeState.step <= fadeState.nSteps) { for (i=0; i<3; i++) { fadeState.currentColor[i] = Math.round(fadeState.currentColor[i] + fadeState.delta[i]); } // transparency is a float; must not round fadeState.currentColor[3] = fadeState.currentColor[3] + fadeState.delta[3]; rgb = rgbaToString(fadeState.currentColor); element.style[property] = rgb; fadeState.step++; } else { clearInterval(fadeState.timer); rgb = rgbaToString(fadeState.endColor); element.style[property] = rgb; delete element.fadeState; } } function colorFade(id,colorProperty,start,end,nSteps,interval) { var delta = [], i,rgb, startColor, element = document.getElementById(id), fadeState = element.fadeState || {}; nSteps = nSteps || 20; interval = interval || 20; if (fadeState.timer) { clearInterval(fadeState.timer); } element.fadeState = fadeState; startColor = hexToRgbaArray(start); fadeState.endColor = hexToRgbaArray(end); for (i=0; i<4; i++){ delta[i] = (fadeState.endColor[i]-startColor[i])/nSteps; } element.style[colorProperty] = rgbaToString(startColor); fadeState.currentColor = startColor; fadeState.delta = delta; fadeState.step = 1; // init fadeState.nSteps = nSteps; fadeState.timer = setInterval( function() { animateColor(element,colorProperty); }, interval); }