2016-06-15 1 views
0

を置くと、私はオープニングを遅らせる必要があるとスムーズにdiv要素を閉じるマウスhover.thisが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

+0

jQueryのは、あなたがそれを行う必要があり、あなたのツールを提供することができます:)!例:https://api.jquery.com/delay/ – Julqas

+0

「スムーズに表示」とは何を意味しているのかを説明します。スライドイン?サイズを変更しますか?フェード?表示/非表示にCSSの 'display'を使っているので、アニメーション化されません。見たいアニメーションエフェクトを選択し、それを記述してください。ネイティブCSSアニメーションで行うことができ、スクリプトは必要ありません(jQueryを除く)。 – aardrian

+0

Charan Kumarが私に何をしたいか教えてくれました。本当にありがとうございました... –

答えて

0

お客様の要件を満たしている場合、以下のスニペットを使用してください。

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>

+0

ありがとうございます。 :) –

関連する問題