JQuery slideToggle délai d'attente

J'ai simplement la page html:JQuery slideToggle délai d'attente

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script> 
     $(document).ready(function() { 

      $("button").click(function() { 
       $("div").slideToggle("slow"); 
      }); 

     }); 
    </script> 

    <style> 
    div { width:400px; } 
    </style> 
</head> 
<body> 
    <button>Toggle</button> 
    <div style="border: 1px solid"> 

    This is the paragraph to end all paragraphs. You 
    should feel <em>lucky</em> to have seen such a paragraph in 
    your life. Congratulations! 
    </div> 
</body> 
</html>

je dois cacher le panneau div automaticaly après 10 secondes si le curseur de la souris ne survole pas le panneau. Comment puis-je le faire (changer le code ci-dessus) pour l'implémenter?

Merci

Source

2011-09-23 ihorko

Panel = Div-conteneur? –

Vérifier http://jsfiddle.net/XRYLk/3/

I ajouté mouseleave donc dans le cas où la souris est dessus lorsque les premiers feux de fonction en place, il sera mis sur la minuterie mouseleave.

jQuery:

$("button").click(function() { 
     $("div").slideToggle("slow"); 
    }); 

setTimeout(hidepanel, 4000); 

function hidepanel(){ 
    if($('div').is(':hover') === false){ $('div').slideToggle(); } 
} 

$('div').mouseleave(function(){ setTimeout(hidepanel, 4000); });

Source

2011-09-23 12:11:59 Tumharyyaaden

Essayez ce code

if($('.to_hide').css("display") == "block") 
{ 
    $(".to_hide").mouseout(function(){ 

     setTimeout(hidepara,10000); 
    }) 
} 
function hidepara() 

    { $(".to_hide").hide(); 

}

échantillon d'analyse http://jsfiddle.net/kaYLG/

Source

2011-09-23 12:15:55

Ceci est une solution très simple. Idée est, si vous ne déplacez pas votre souris sur le div-conteneur .. il sera slideUp() le conteneur lui-même en 2000ms (je mets 2000ms, car son ennuyeux d'attendre 10sec).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <style> 
     div {width: 400px; border: 1px solid;} 
    </style> 
</head> 
<body> 
    <div> 
     This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations! 
    </div> 
    <script> 
     $(document).ready(function() { 
      var mouseover_to = setTimeout(function() { 
       $("div").slideUp("slow"); 
      }, 2000); // Change it to 10000 to be 10sec 
      $('div').mouseover(function() { 
       clearTimeout(mouseover_to); 
      }); 
     }); 
    </script> 
</body> 
</html>

^{[View output]}

D'abord, il attendra jusqu'à ce que le document est prêt
Il commencera le compte à rebours à 2000ms avec setTimeout() et définit comme ressource à la variable mouseover_to.
Cependant, si mouseover() est détectée sur le div alors le compte à rebours sera annulé avec clearTimeout(), grâce à l'aide de la ressource mouseover_to

Source

2011-09-23 12:16:15

JQuery slideToggle délai d'attente

Répondre

Questions connexes