Hello to all!
I'm new with jQuery and was wondering if someone can help me out with
my problem I'm having for simple menu.
Here is the HTML code:
<div id="headermenu">
<a href="http://flairpair.com/blog"; title="FlairPair
Blog
Home"><img src="http://flairpair.com/blog/wp-content/themes/FlairPair/
img/home_off.gif" alt="FlairPair Blog Home" border="0" /></a>
<a href="http://flairpair.com/blog"; title="Web
Development
Blog"><img src="http://flairpair.com/blog/wp-content/themes/FlairPair/
img/blog_off.gif" alt="Web development blog" border="0" /></a>
<a href="http://flairpair.com/blog/resources"; title="Web
Development Resources"><img src="http://flairpair.com/blog/wp-content/
themes/FlairPair/img/res_off.gif" alt="Web development resources"
border="0" /></a>
<a href="http://flairpair.com/blog/about-us";
title="About
FlairPair Blog"><img src="http://flairpair.com/blog/wp-content/themes/
FlairPair/img/about_off.gif" alt="About FlairPair" border="0" /></a>
<a href="http://flairpair.com/blog/contact-us";
title="Contact
FlairPair"><img src="http://flairpair.com/blog/wp-content/themes/
FlairPair/img/contact_off.gif" alt="Contact FlairPair" border="0" /></
a>
</div>
... and here is the JS code:
$(document).ready(function() {
$("#headermenu a").hover(function() {
var titleAttr = $(this).attr("title");
$("#headermenu_text").html(titleAttr);
$('#headermenu_text').SlideInLeft(500);
return false;
}, function() {
$('#headermenu_text').SlideOutLeft(300);
return false;
});
return false;
});
What happens is that when you hover the links/buttons the effect keeps
looping until all elements are passed. Hope this makes sense what I
said :)... Maybe it would be better to check the URL:
http://flairpair.com/blog/,
top icons beside the logo (hover them to see what I'm talking about).
What I want is that effect is performed only once and for hovered
button.
Thanks!
