Separation of concerns
One of the most important design principle is separate the semantic (html), style (css) and behaviour.
The consequencies of this statement are to keep our html free of logic and style and enforce the semantic inside the html.
The main reason to follow this principle is to keep untouched the semantic of the document.
This is better both for accessibility and search engine optimization.
An example of a right use of progressive enhancement is fancybox. This jquery plugin implements a lightbox effect when a user clicks on an image.
You can link an external image like this one:
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
or you can use an internal link:
<a id="single_image" href="#image_big"><img src="image_small.jpg" alt=""/></a> ... <div id="image_big"><img src="image_big.jpg" /></div>
The next example shows the wrong approach.
This is jquerytools overlay markup (taken from an example on the jquerytools website)
<img src="thumbs/barcelona-pavilion.jpg" rel="#mies1"/> <div class="simple_overlay" id="mies1"> <!-- large image --> <img src="photos/barcelona-pavilion-large.jpg" /> <!-- image details --> <div class="details"> <h3>The Barcelona Pavilion</h3> <h4>Barcelona, Spain</h4> <p>The content ...</p> </div> </div>
In this example the img element is connected to a div through a rel attribute (rel="#mies1"). But the image tag purpose is not to link a resource. And this is not what the rel attributes is intended for.
The rel attribute (http://www.w3.org/TR/html4/struct/links.html) is used to specify the relations between two resources and not the resource itself.
Progressive enhancement tricks
As a matter of fact the browser renders the page while is loading the DOM tree. The scripts see the DOM node right after the loading.
Thus, following this approach, you could see the page while changing.
You can avoid this hiding the overlay container in the css (using display:none).
For other effect you can hide like the previous example and then shows only after adding the style and markup (for example with .show() method of jquery).
Another nice effect is to remove the element opacity in the styleshhet and, at the end of the script, animate the opacity with a fade-in effect.