Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet:
$('#navibar a').hover(function(){
var position = $(this).position();
var width = $(this).width();
$('#underliner').css({'width': '' + width + '','left': position.left});
//$('#underliner').show("slide", { direction: "left" }, 100);
$('#underliner').stop().animate({opacity: 1}, 30).show();
}, function () {
var homePos = $(this).find(attr(activePageHref)).position();
var homeWidth = $(this).find(attr(activePageHref)).width();
//$('#underliner').css({'width': '' + homeWidth + '','left': homePos.left});
//$('#underliner').show("slide", { direction: "left" }, 100);
//$('#underliner').stop().animate({opacity: 1}, 30).show();
alert(activePageHref);
});
The variable activePageHref represents the clicked page and is correctly displayed in the alert message (for example purposes, let's say its value is "home"). The goal is to set the #underliner element's position and width to match the selected navigation link upon hover out. Is there a way to locate other 'a' elements and utilize them? The intention behind the code should be apparent. This is the HTML structure:
<ul id="navibar">
<li><a href="home">Home</a></li>
<li><a href="products">Products</a></li>
<li><a href="games">Games</a></li>
<li><a href="store">Store</a></li>
<li><a href="support">Support</a></li>
<li><a href="community">Community</a></li>
</ul>
I acknowledge that the initial code block has significant errors, as it was implemented out of frustration and desperation before seeking assistance here.