As part of a website that I am building I wanted to be able to draw the users attention to a content that is already on the page. This type of behavior may have purposes else where, so I encapsulated the content into a jQuery plugin. The following screen cast shows the desired effect.
The jQuery Plugin
highlighClass – This is the CSS class that is added to the element just before the first blink and is removed after the last blink.
blinkCount – This is the number of blinks that occur.
fadeDownSpeed, fadeUpSpeed – These options set the fade speeds.
fadeToOpacity – This sets the lower opacity used in the blink routine.
The blink effect is realized by cycling the opacity of the element between ‘fadeToOpacity’ and 1. Additional highlighting is achieved using a CSS class.
How do I use this?
In my contact form example I have a link that is defined using the following HTML:
<p>Contact us via <a id="other-contact" href="#contact-info">snail mail or phone</a>.</p>
I also have a contact area defined by the following HTML:
<p>123 South Main Street</p>
<p>Verona, Wisconsin 53593</p>
Notice the href attribute uses a link to a named element. This will cause the browser to scroll to the element if it happens to be off the page. To use the jQuery plugin we hook up the click event as follows:
Hope this is useful. Let me know if you have improvements. The jQuery library continues to amaze me.