悬停延迟-jquery_Jquery_Hover - Fatal编程技术网

悬停延迟-jquery

jquery

悬停延迟-jquery,jquery,hover,Jquery,Hover,希望有人能帮忙。我有下面的代码，当用户将鼠标悬停在名称上时，右边div中的图像和文本会发生变化如何延迟悬停，以便用户在页面上滑动时不会快速更改内容。。。如果这有道理的话 <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script> <script>$(document).ready(function() {

希望有人能帮忙。我有下面的代码，当用户将鼠标悬停在名称上时，右边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>


$（文档）.ready（函数（）{
开关=$（'.switches>li'）；
幻灯片=$（“#幻灯片>div”）；
开关。每个（功能（idx）{
$（this.data（'slide'，slides.eq（idx））；
}).悬停(
函数（）{
switches.removeClass（'active'）；
slides.removeClass（'active'）；
$（this.addClass（'active'）；
$（this）.data（'slide'）.addClass（'active'）；
});
});
.开关。激活{
字体大小：粗体；
}
.开关{
列表样式类型：无；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
线高：21px；
光标：指针；
填充：0；
}
#幻灯片组{
显示：无；
}
#幻灯片分区活动{
显示：块；
}
我们的人民


Philip Havers QC
罗伯特·西布鲁克QC
詹姆斯·巴德诺QC
斯蒂芬米勒QC
基兰库南QC
特伦斯·科格兰QC


盖伊·曼斯菲尔德QC
萨莉·史密斯QC
伊丽莎白·安妮·甘贝尔QC
保罗·里斯QC
Margaret Bowron QC
尼尔·加纳姆QC


David Balcombe QC
乔安娜·格林QC
大卫哈特QC
马丁·福特QC
威廉·埃迪斯QC
温迪奥特韦特QC


温迪奥特韦特QC
安格斯·麦卡洛QC
菲利帕惠普尔QC
克里斯蒂娜·兰伯特QC

保罗·伍兹，
高级合伙人
我走了！
基伦
特伦斯
家伙

约翰·吉姆莱特
玛丽娜·惠勒
大卫·埃文斯
亨利·维特科姆
安德鲁·肯尼迪
约翰·惠廷
马丁唐斯


贾斯汀·莱文森
莎拉兰伯特
奥文·托马斯
杰里米·海姆
奥利弗·桑德斯
本·柯林斯
沙欣·拉赫曼


理查德·史密斯
克里斯托弗·梅勒
罗伯特·凯勒
马修·巴恩斯
萨拉比特·辛格
大卫·曼克内尔


理查德·芒福德
约翰·乔利夫
雷切尔·马库斯
Pritesh Rathod
卡罗琳十字
马修·唐莫尔
苏珊兰伯特

您需要：

您需要这个：

检查插件，它将完全满足您的需要

如果您只需要延迟，您可以添加一个超时，这会将您的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（）方法来阻止用户将鼠标悬停在许多选项上，可能会更好。

如果您只需要延迟，您可以添加一个超时，这会将您的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（）方法可能会更好。如果用户悬停在许多选项上，则可以使用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的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");
          });
   });

这很好，效果也很好。然而，当我将鼠标从名称上移开时，它现在消失了。有什么想法吗？这是因为悬停函数中的第二个函数删除了活动幻灯片。最简单的解决方案是使用鼠标悬停，使用悬停函数第一部分的代码。这很好，效果也很好。然而，当我将鼠标从名称上移开时，它现在消失了。有什么想法吗？这是因为悬停函数中的第二个函数删除了活动幻灯片。最简单的解决方案是使用鼠标悬停，使用hover函数第一部分的代码。