懸停延遲 - jquery

希望有人能幫助。我有下面的代碼，當用戶將鼠標懸停在名稱上時，右側div中的圖像和文本會發生變化。懸停延遲 - jquery

我怎樣才能延緩懸停，這樣當用戶在頁面上揮筆它不迅速改變的內容...如果是有道理的

<head> 

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script> 


<script>$(document).ready(function() { 
    switches = $('.switches > li'); 
    slides = $('#slides > div'); 
    switches.each(function(idx) { 
      $(this).data('slide', slides.eq(idx)); 
     }).hover(
     function() { 
      switches.removeClass('active'); 
      slides.removeClass('active');    
      $(this).addClass('active'); 
      $(this).data('slide').addClass('active'); 
     }); 
    });</script> 




    <style type="text/css"> 

.switches .active { 
    font-weight: bold; 
} 

.switches { 
list-style-type:none; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
line-height:21px; 
cursor:pointer; 
padding:0; 


} 

#slides div { 
    display: none; 
} 

#slides div.active { 
    display: block; 
} 

</style> 

</head> 

<body> 


    <div id="people"> 

<h1>Our People<br /> 
</h1> 

<table width="912" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="175" valign="top"> 
    <ul class="switches"> 
    <li class="active">Philip Havers QC</li> 
    <li>Robert Seabrook QC</li> 
    <li>James Badenoch QC</li> 
    <li>Stephen Miller QC</li> 
    <li>Kieran Coonan QC</li> 
    <li>Terence Coghlan QC</li> 
    </ul> 

    </td> 
    <td width="186" valign="top"> 
    <ul class="switches"> 
     <li>Guy Mansfield QC</li> 
     <li>Sally Smith QC</li> 
     <li>Elizabeth-Anne Gumbel QC</li> 
     <li>Paul Rees QC</li> 
     <li>Margaret Bowron QC</li> 
     <li>Neil Garnham QC</li> 

     </ul> 
     </td> 
    <td width="170" valign="top"> 
     <ul class="switches"> 
     <li>David Balcombe QC</li> 
     <li>Joanna Glynn QC</li> 
     <li>David Hart QC</li> 
     <li>Martin Forde QC</li> 
     <li>William Edis QC</li> 
     <li>Wendy Outhwaite QC</li> 
     </ul> 
     </td> 

    <td width="221" valign="top"> 
    <ul class="switches"> 
     <li>Wendy Outhwaite QC</li> 
     <li>Angus McCullough QC</li> 
     <li>Philippa Whipple QC</li> 
     <li>Christina Lambert QC</li> 
     </ul> 
     </td> 
    <td width="160" rowspan="3" valign="top"> 

<div id="slides"> 
    <div class="active"><img src="images/paul.jpg" width="160" height="178" alt="Paul" /> 
    Paul Woods, 
Senior Partner 

    <a href="#">View CV ></a> 
</div> 

    <div><img src="images/paul2.jpg" width="160" height="178" alt="Paul" /></div> 
    <div><img src="images/paul3.jpg" width="160" height="178" alt="Paul" /></div> 
    <div>I'm gone!</div> 
    <div>kiren</div> 
    <div>terence</div> 
    <div>guy</div> 
</div> 



    </td> 
    </tr> 
    <tr> 
    <td height="29" colspan="4">&nbsp;</td> 
    </tr> 
    <tr> 
    <td><ul class="switches"> 
     <li>John Gimlette</li>    
<li>Marina Wheeler</li>    
<li>David Evans</li>     
<li>Henry Witcomb</li>    
<li>Andrew Kennedy</li>    
<li>John Whitting</li>    
<li>Martin Downs</li> 
</ul> 
</td> 
    <td> 
    <ul class="switches"> 
    Justin Levinson 
    <li>Sarah Lambert</li> 
    <li>Owain Thomas</li> 
    <li>Jeremy Hyam</li> 
    <li>Oliver Sanders</li> 
    <li>Ben Collins</li> 
    <li>Shaheen Rahman</li> 
    </ul> 
    </td> 
    <td> 
    <ul class="switches"> 
    <li>Richard Smith</li> 
    <li>Christopher Mellor</li> 
    <li>Robert Kellar</li> 
    <li>Matthew Barnes</li> 
    <li>Sarabjit Singh</li> 
    <li>David Manknell</li> 
    </ul> 
    </td> 
    <td> 
    <ul class="switches"> 
    <li>Richard Mumford</li> 
    <li>John Jolliffe</li> 
    <li>Rachel Marcus</li> 
    <li>Pritesh Rathod</li> 
    <li>Caroline Cross</li> 
    <li>Matthew Donmall</li> 
    <li>Suzanne Lambert</li> 
    </ul> 
    </td> 
    </tr> 
</table> 
</div> 


</div> 

</body> 
</html>

來源

2010-10-08 Miles

如果你想要的只是延遲你可以做廣告DA超時，這將你的JavaScript更改爲類似：

$(document).ready(function() { 
    var timeout = null; 
    var delay = 500; 
    var switches = $('.switches > li'); 
    var slides = $('#slides > div'); 
    switches 
     .each(function(idx) { $(this).data('slide', slides.eq(idx)); }) 
     .hover(
      function() { 
       var hoveredElement = $(this); 
       timeout = setTimeout(function(){ 
        switches.removeClass('active'); 
        slides.removeClass('active');    
        hoveredElement.addClass('active'); 
        hoveredElement.data('slide').addClass('active'); 
       }, delay); 
      }, 
      function(){ 
       clearTimeout(timeout); 
       slides.removeClass('active'); 
      }); 
    });

而且到這一點，可能會更好，如果你也許在幻燈片上的內容褪色，使用動畫（）和stop（）方法停止如果用戶在很多選項上盤旋，它會發瘋。

來源

2010-10-08 11:45:25

這就是偉大的和行之有效的。然而，當我將鼠標從現在消失的名稱移開時。任何想法交配？ – Miles 2010-10-08 13:15:55

這是因爲懸停功能中的第二個功能刪除了活動幻燈片。最簡單的解決方案是使用懸停函數第一部分的代碼更改爲使用鼠標懸停。 – 2010-10-18 09:37:17

你需要這樣的：

http://cherne.net/brian/resources/jquery.hoverIntent.html

來源

2010-10-08 11:31:04 jAndy

檢查出jQuery.hoverIntent插件，它會做你正在做的事

來源

2010-10-08 11:38:44

我們可以使用的mouseenter和jQuery

的鼠標移開

$(document).ready(function() { 
    switches = $('.switches > li'); 
    var delay = 500; 
    switches. 
     mouseenter(function() {     
      var $self = $(this); 
      $self .data("inHover", "true"); 
      setTimeout(
       function(){ 
        if($self.data("inHover") == "true"){ 
         $self.addClass("active"); 
        }  
       }, 
       delay 
      ); 
      }). 
      mouseout(  
       function(){ 
        $self .data("inHover", "false"); 
        $self.addClass("active"); 
      }); 
    });

來源

2011-10-16 19:20:16 Anoop

懸停延遲 - jquery

回答

相關問題