Question

I am trying to make my jquery codes look better here. My functions are working correctly but I was wondering if anyone can make my codes less ugly. Thanks a lot!

HTML

<div class='image_layout'>
    <a href='#'><img src=' a.jpg '/></a> 
          <br><p class='credits'>hahahah 
          <br>Agency: Agency1
          <br>Picture ID: 5 </p> 
</div>

jQuery

$('#image_layout').on('hover', 'img', function() {
    $(this).parent().next().next().fadeIn('fast');
})
$('#image_layout').on('mouseout', 'img', function() {
    $(this).parent().next().next().fadeOut('fast');
})​

Answer 1

You can pass two functions to jQuery hover – one for mousein, one for mouseout. You can make this change as long as you don’t have dynamically added images. Your code would also be a lot simpler if the element you are fading has an ID or class:

$('#image_layout img').hover(
    function () {
        $(this).closest('.someClass').fadeIn('fast');
    },
    function () {
        $(this).closest('.someClass').fadeOut('fast');
    }
);