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