2016-06-15 11 views
0

Ich brauche Öffnung zu verzögern und ein div reibungslos zu schließen, wenn die Maus hover.this mein Code,div öffnen und schließen Geschwindigkeit, wenn die Maus schweben

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>

fand ich diese Quelle aber ich habe keine Ahnung, wie man es benutzt. http://cherne.net/brian/resources/jquery.hoverIntent.html

+0

jQuery können Sie die Tools zur Verfügung stellen müssen, das zu tun :)! Beispiel: https://api.jquery.com/delay/ – Julqas

+0

Beschreiben Sie, was Sie unter "reibungslos anzeigen" verstehen. Reinschieben? Größe ändern? Verblassen? Sie verwenden CSS 'display', um zu verbergen/anzeigen, so dass nicht animiert wird. Wählen Sie einen Animationseffekt, den Sie sehen möchten, beschreiben Sie ihn, und ich schätze, Sie können dies mit nativen CSS-Animationen tun und benötigen kein Skript (ganz zu schweigen von jQuery). – aardrian

+0

Charan Kumar gab mir, was ich will mate.thank dir sehr viel ... –

Antwort

0

Verwenden Sie unten Snippet, wenn es Ihre Anforderung erfüllt.

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

vielen Dank Kumpel. :) –

Verwandte Themen