Edit of Javascript required to add fade in/fade out effect please

Is it possible to add a fade in fade out effect to this javascript? At the moment it just loads an image to another div upon hover of first div but with no effect. Thanks in advance.

<script language="javascript" type="text/javascript"> 
    function changeDisplay(bgImageURL)
    {
            var displayDiv = document.getElementById("displayDiv");


        // draw popup image in the div
        displayDiv.innerHTML = 
            '<a class="popup1" href="#v"><img src="' + bgImageURL+ '" alt="" /></a>';
        // show the display in case it was hidden before
        displayDiv.style.visibility = "visible";
    }

    function hideDisplay()
    {
        var displayDiv = document.getElementById("displayDiv");

        // hide it when the mouse 开发者_如何转开发rolls off the thumbnail
        displayDiv.style.visibility = "hidden";
    }

    </script>

Using jQuery

http://api.jquery.com/fadeIn/

<div id="fade"></div> <!-- make sure this is initially hidden -->

<script type="text/javascript">
  $('#fade').fadeIn('slow', function() {
    // When animation is complete, it runs this function
  });
</script>

fadeOut: http://api.jquery.com/fadeOut/

simple change in your existing code

include jquery plugin before your javascript code and change

display function

displayDiv.style.visibility = "visible"; to  displayDiv.fadeIn('slow');

hide function

displayDiv.style.visibility = "visible"; to displayDiv.fadeOut();