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

Question

On StackOverflow website, you will notice your 'Notifications' indicator at the top left. When somebody replies to your question/answer, you click the notification and it directs you to that particular reply, then displays with an orange background and slowly fades to white, to let you know which reply you're looking at. I would like to know how I can achieve this fade method.

The element I would like to flash is a div. Below is how my DIVS are arranged as they are dynamically produced 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 until mouse-over, when it changes to grey.

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

I could probably work it out if there was one DIV to flash and that I knew the DIV ID to flash, but coming from a query string, I have no idea what I am doing. I would be grateful for any suggestions, examples or snippets to get me started with this. I think I found JQuery plugins for flashing elements but even then, how do I feed that plugin with my query string 'photoID', my JS is rubbish obviously!

Many thanks

MY ANSWER - Thanks to (150PoundsOfDonamite)

I actually made a mistake, my div's id was NOT coming from a query string, it was coming from the anchor/hash part of the URL. So thanks to the accepted answer (below), I managed to get this working - and looks the biz!

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

I then 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

Here's a color fader , creative commons license.
http://www.scriptiny.com/2008/05/javascript-color-fading-script/

I improved on that code to support transparency.

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

does not require jquery, or mootools, or any other framework.

The interesting part in the code is 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);
}

Answer 2

You can do that using this Jquery color animation plugin. Of course, that is assuming that you are using Jquery. If your javascript skills are not as strong as you'd like, jQuery is a good place to start. Don't get me wrong, it's no replacement for learning pure javascript, but it does a lot of things for you.

The color animation based on John Resig's color animation plugin, but adds rgba support so you can have your transparency. You can also animate text and border colors.

In order to get the photo id from the query string, you can use a function like this (which I found in SO here), but I personally find a def (default) argument helpful when I want to set the return value automatically when name is 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 that just about anywhere in a script tag. Then to get your parameter and flash it, place it where you need it (eg., head tag). Here I'm assuming you want to do this at documentReady (when the page's DOM elements are loaded), but you could also delay it a bit, or wait til 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'd like to delay that 2 seconds after the page has loaded:

$(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'd like to wait until the user mouses over that (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 photoId after the # is even easier (you won't be needing 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);
    }
});