Here’s a small Javascript function which enables animated highlighting effect on the navigation (lavalamp effect) with the help of jquery easing plugin

$.fn.lavalamb = function(ImgPath){
/* ImgPath:  Path of the image which you need to animate when you hover over a navigation link
   this can be a shadow png image or a pointer image or underline image which you want to animate with a mouseover / mouseout action on a link

   Add css class "Highlight" to the node which is currently active, so the image will always be animated back to this node on mouseout
*/
var LeftPos;
$(this).append('<div id="lavalamp"><img src="'+ImgPath+'" alt="" /></div>'); //Appending lavalamb image to the html, this div can be skinned in the css.
$(this).parent().css({position: "relative"}); //setting the position
$("#lavalamp").css({
position: "absolute",top: $(this).height() // These css values can be edited to vertically position the lavalamb image
});
  $(this).find("li").hover(  //Link hover function
function(){ 	//Rollover
LeftPos = $(this).offset().left - $(this).parent().offset().left; //calculating the left position
LeftPos = (LeftPos - ($("#lavalamp").width()/2) + ($(this).width()/2)); //calculating the left position
$("#lavalamp").animate({left: LeftPos},{queue:false,duration:700,easing: "easeInQuart"}); //Animating the image from the start position to the current mouseover position
},
function(){
   LeftPos = $(this).parent().find("li.Highlight").offset().left - $(this).parent().offset().left; // Getting the position of the highlighted node
 	 $("#lavalamp").animate({left: LeftPos},{queue:false,duration:700,easing: "easeOutQuart"}); //Animating the image back to the start position from the current mouseover position
  });
}

And call this function in the html page

<script type="text/javascript">
$("#Navigation").lavalamb("Images/Background/NavShadow.png"); // Navigation is an id of the <UL> list which has navigation nodes
</script>

Here’s an example
Example1