javascript - 鼠标悬停时div打开和关闭速度

Question

我需要在鼠标悬停时平滑地延迟打开和关闭一个 div。这是我的代码，

function show_panel1()
{
document.getElementById('hoverpanel1').style.display="block";
}

function hide_panel1()
{
document.getElementById('hoverpanel1').style.display="none";
}

<div class="col-sm-4 slideanim" onMouseOver="show_panel1()" onMouseOut="hide_panel1()">
      <div class="thumbnail panel">
        <img src="images/hospital.jpg" alt="Paris">
        <h3><strong>Service1</strong></h3>
        <div class="" id="hoverpanel1" style="display:none;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
          <h3 style="font-size:20px;">NEW PETS FOR SALE!</h3>
          <?php include"panelcarousel.php"; ?>
        </div>
      </div>
    </div>

我找到了这个资源，但我不知道如何使用它。 http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 1

如果满足您的要求，请使用下面的代码段。

function show_panel1()
{
$('#hoverpanel1').slideDown();
}

function hide_panel1()
{
$('#hoverpanel1').slideUp();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4 slideanim" onMouseEnter="show_panel1()" onMouseLeave="hide_panel1()">
      <div class="thumbnail panel">
        <img src="images/hospital.jpg" alt="Paris">
        <h3><strong>Service1</strong></h3>
        <div class="" id="hoverpanel1" style="display:none;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
          <h3 style="font-size:20px;">NEW PETS FOR SALE!</h3>
          <?php include"panelcarousel.php"; ?>
        </div>
      </div>
    </div>