请编辑 Javascript 以添加淡入/淡出效果

Question

是否可以在此 javascript 中添加淡入淡出效果？目前，它只是在第一个 div 悬停时将图像加载到另一个 div，但没有任何效果。提前致谢。

<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>

Answer 1

使用 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/

Answer 2

简单改变你现有的代码

include jquery plugin before your javascript code and change

显示功能

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

隐藏功能

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