Question

希望有人可以提供帮助。我有下面的代码，当用户将鼠标悬停在名称上时，右侧div中的图像和文本会发生变化。

如何延迟悬停以便当用户在页面上滑动时，它不会快速更改内容...如果这有意义

<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>

Answer 1

如果您想要的只是延迟，则可以添加超时，这会将您的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');
            });
    });

除此之外，如果你对幻灯片中的内容感到褪色，使用animate（）和stop（）方法来阻止它疯狂，如果用户在许多选项上徘徊，那么它可能会更好。

Answer 2

你需要这个：

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

Answer 3

查看jQuery.hoverIntent插件，它会完全满足您的需求

Answer 4

我们可以使用jQuery的mouseenter和mouseout

$(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");
          });
   });

悬停延迟 - jquery

4 个答案: