jqueryhovermouseeventfadeto

How can I use jQuery to make an image fade on a hover?

I've tried looking at my code over and over again to have the octo image fade on mouse hover with no luck. This is a rookie question but wondering if someone greater than I can take a peek.

Here's my code: https://jsfiddle.net/bennett_up/rybc238w/

$('#octo').hover(function(){  
$(this).find('img').stop().fadeTo('slow', 0);},  
function(){  
$(this).find('img').stop().fadeTo('slow', 1);  
});

Thanks, Ben

Solution

  • In the fiddle, I see that the image itself is '#octo' and not a child of it, therefore you don't need the .find('img') as follows:

    $('#octo').hover(function(){  
   $(this).stop().fadeTo('slow', 0);  
},  
function(){  
  $(this).stop().fadeTo('slow', 1);  
});

    HTML for reference:

    <ul id="contact">
    <li><img id="octo" src="http://s.icons8.com/wp-content/uploads/2014/01/octopus-128.png" width="28" height="28"></li>
</ul>

    And here's a working fiddle:

    https://jsfiddle.net/d6t0waoj/