Question

I am working on a Web site for a restaurant, and as the menu page is somewhat expansive (I am putting the full menu on the site since it is not changed very often), I added some links at the top that jump to specific sections. Even so, the sections near the bottom are somewhat short, and it can be tricky to tell which one you actually jumped to. Setting a :target selector for the headings works, but I don’t like the fact that whatever effect I use to distinguish the header never actually goes away.

Is it possible to use jQuery to apply a “yellow fade” effect to an element when it is targeted by an internal link, so that you can tell where you jumped but it doesn’t stay around and clutter the page?

Answer 1

The way i do it below includes using the jQuery-ui library, specifically $("#something").effect("highlight", "slow");

this will result in a brief pulse of color on whatever was selected by jQuery. For your solution, you would need pulse the Anchor’s header element briefly after clicking on the table of contents.

<a href="#someTarget" class="tableOfContents">good food</a>
....html

<a id="someTarget">Good Food</a>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"/>
<script>
 $(document).ready(function(event){
  $(".tableOfContents").click(function(event){
     $($(this).attr("href")).effect("highlight", "slow");
   });
});
    </script>