How do I make a text box glow then fade when a link is clicked?

Question

I'm trying to make a text box at the bottom of a page more obvious - how would I go about making a link which when clicked moves the browser to the bottom of the page and then makes the text box glow around the edges then fades (as in the glow pulses, I don't want the text box to fade!)?

Answer 1

I have a crude implementation for you. It uses the abrupt anchor tag click to move you to the text box, however, you could use jQuery's animate function to make it pretty. It does have the effect with the pulse you wanted.

http://jsfiddle.net/pBg6U/

$(function() {
    $("#glow-trigger").on('click', function(e) {
        var glower = $('.glow');
        window.setInterval(function() {  
            glower.toggleClass('active');
        }, 1000);
    });
});

Answer 2

You can use the following function to scroll to an element. Just give the id or class to the function to which you want to scroll:

function scrollto(element) {
    $('html, body').animate({scrollTop: ($(element).offset().top)}, 'slow');
}

For the glow effect you can use JQuery highlight function.

$(element).show("highlight");