Reputation: 65

hover delay - jquery

Hope someone can help. I have the code below which when the user hovers over the name the image and text in the div on the right changes.

How can I delay the hover so that when the user swipes across the page it doesnt change the content quickly... if that makes sense

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

Upvotes: 0

Answers (4)

Anoop

Reputation: 23208

We can use mouseenter and mouseout of 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");
          });
   });

Upvotes: 0

Coin_op

Reputation: 10718

If all you want is a delay you could add a timeout, which would change your JavaScript to something like:

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

Further to this it would probably be nicer if you maybe faded in the content on the slides, using the animate() and stop() methods to stop it going crazy if the user hovered over lots of options.

Upvotes: 2

KARASZI István

Reputation: 31467

Check out the jQuery.hoverIntent plugin, it will do exactly what you need

Upvotes: 0

jAndy

Reputation: 235962

You need this:

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

Upvotes: 1

hover delay - jquery

Answers (4)

Related Questions