How to combine 2 click events functions
<p>I currently have this and it works fine but I wanted to have a nicer way to do the same thing, possibly having one single function rather than 2 distinctive ones and save lines.
Just some more elegant way than so many lines. The 2 following functions look similar but what they do are slightly different as you can see.
Anyone? Thanks</p>

<pre><code>$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
}
}, "img");

$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
}
}, ".gallery a img");
</code></pre>
