jQuery fade image in and out on click or load
<p>I was given this fantastic script, from @Phil, that helped get my out of a stump and it works perfectly in my application. But because I'm so new to javascript I can't figure out how to make the images animate opacity in and animate opacity out.</p>

<pre><code>// jQuery syntactic sugar to run after page loads
$(function () {
    // attach a click event to anything with a data-file attribute
    $("[data-file]").on('click', function (evt) {
        // figure out what was clicked
        var clickedEl = $(evt.target);
        // get the data-file attribute
        var dataFile = clickedEl.attr('data-file');
        var container = $(".bom_container");
        // empty the div
        container.empty();
        // create image element
        var img = $("&lt;img/&gt;").attr("src", dataFile)
        // add it to the container
        container.append(img);
        // or update the background image
        // container.css('background-image','url('+ dataFile +')');
    });
});
</code></pre>

<p>When the links are clicked on, these images open in a container. But again, I would like the images to ease in instead of just BOOM APPEAR. Is there somewhere I can add animate opacity to this script or do I have to add an whole new script?</p>
