Пожалуйста, отредактируйте Javascript для добавления эффекта постепенного появления / исчезновения. - PullRequest
0 голосов
/ 26 сентября 2011

Можно ли добавить эффект постепенного исчезновения в этот 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>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2011

простое изменение в вашем существующем коде

include jquery plugin before your javascript code and change

функция отображения

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

функция скрытия

displayDiv.style.visibility = "visible"; to displayDiv.fadeOut();
0 голосов
/ 26 сентября 2011

Использование 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/

...