1

I've been working on trying to get a simple color fade in using the Jquery code I have below. I'm basically attempting to activate the 'hover' class when a user moves his/her mouse over a link. At the moment, the code doesn't work but I hope it illustrates what I'm trying to accomplish.

Any assistance would be greatly appreciated!

Thank you

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Untitled Document</title>

<style>

#menu-name li {
    color: black;
    text-shadow: 0px 1px 4px #777;
    background-color: green;
    width: 200px;
}

#menu-name li .hover {
    background: orange;
}
</style>

<script type="text/javascript"?>
$(document).ready(function(){ 

    //Set the anchor link opacity to 0 and begin hover function
    $("#menu-name li a").hover(function(){ 

        //Fade to an opacity of 1 at a speed of 200ms
        $(this).find('.hover').stop().animate({"opacity" : 1}, 300); 

        //On mouse-off
        }, function(){

        //Fade to an opacity of 0 at a speed of 100ms
        $(this).find('hover').stop().animate({"opacity" : 0}, 200); 

    });

});
</script>

</head>
<script src="jquery-1.9.1.js"></script>
<body>

<div id="menu-container">
<ul id="menu-name">
    <li class="hover"><a href="#">Health Care</a></li>
    <li class="hover"><a href="#">Love</a></li>
</ul>
</div>


</body>
</html>
user2325396
  • 105
  • 2
  • 12

1 Answers1

1

I created a jsFiddle that fixes your issues: http://jsfiddle.net/kAW65/

There are actually two issues:

  1. The way you are fading in/out is incorrect
  2. You shouldn't have the "hover" class on the li elements; Instead (I think), you want to add/remove it from the "a" elements

Corrected JS:

$(document).ready(function(){ 

//Set the anchor link opacity to 0 and begin hover function
$("#menu-name li a").hover(function(){ 

    //Fade to an opacity of 1 at a speed of 200ms
    //$(this).find('.hover').stop().animate({"opacity" : 100}, 300); 
    $(this).fadeOut(0).addClass('hover').fadeIn(300);

    //On mouse-off
    }, function(){

    //Fade to an opacity of 0 at a speed of 100ms
    $(this).fadeOut(300)
     .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });

});
});

Corrected HTML:

<div id="menu-container">
<ul id="menu-name">
<li><a href="#">Health Care</a></li>
<li><a href="#">Love</a></li>
</ul>
</div>

For the fading code, I referenced this answer: fade in/out hover by jQuery

Community
  • 1
  • 1
htxryan
  • 2,871
  • 2
  • 21
  • 21
  • Hi Ryan, This is great and thank you for the help! It works just like I wanted. Would it be possible to show me how to apply this effect to the li block itself and not just the text link? I attempted changing the Jquery to $("#menu-name li")...but that didn't work. Thanks again for the assistance – user2325396 Aug 24 '13 at 22:37
  • You could do it to the "li", but it might be a bad user experience, since the element would be highlighted but not clickable (since only the "a" is clickable). Instead, I would suggest making the "a" element larger by adding padding so that it fits your desired size. I went ahead and edited the fiddle CSS to show what this might look like. Let me know if it's not what you need. – htxryan Aug 24 '13 at 22:51
  • Hey Ryan - Thanks again for the most useful advice. I went ahead and added some padding to the A tag and it looks pretty good. As far as linking the LI, I'm ultimately looking to incorporate your code into a WordPress menu (I was just working at it one piece at a time). If I were to adapt this code to a demo site such as http://www.threeell.com/demo, would you recommend sticking with adding padding to the "A" tag or linking the list item individually? – user2325396 Aug 24 '13 at 22:58
  • Glad to help. I think your link was wrong. Did you mean threell.com/demo? In any case, the best practice would be to use the "a" (anchor) element as the link. The only way to make the "li" clickable would be by attaching a jQuery click event, but this would only be necessary if the "a" would not work for some reason. In short, you should use anchor tags for links whenever possible. – htxryan Aug 24 '13 at 23:03
  • Awesome. Thanks again for taking the time and best regards! – user2325396 Aug 25 '13 at 01:30
  • Hey Ryan - You're right the link was incorrect. It's actually http://www.threecell.com/demo. Based on the existing WordPress menu structure, I've adapted your Jquery code to say "$("#menu-sample-menu li a").hover(function(){ ...." and I also changed the style classes to ".menu-sample-menu li" and ".menu-sample-menu li a.hover". For some reason, the hover isn't being triggered. If you have a moment, I'd appreciate any guidance you can provide. The stylesheet link is included - http://www.threecell.com/demo/wp-content/themes/pinboard/style.css - Thank you – user2325396 Aug 25 '13 at 02:16
  • Can you create a new question or update this question to include your javascript and css code? – htxryan Aug 25 '13 at 02:21
  • Will do and done: I've included the link here - Thanks Ryan - http://stackoverflow.com/questions/18425174/simple-color-fadein-hover-jquery-with-wordpress-site – user2325396 Aug 25 '13 at 02:47
  • Hey Ryan, I posted an additional question regarding fading in only the background while leaving the text. If you get a chance, I'd appreciate any additional guidance you can offer. Thx :) http://stackoverflow.com/questions/18479193/jquery-background-text-color-fade – user2325396 Aug 28 '13 at 04:30