I had a look at hoverIntent, but while it does seem to make the problem occur less often it doesn't prevent it entirely.
Here's an example that illustrates the problem I'm having (using hover instead of hoverIntent so that the problem is more obvious) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hovering test</title> <style type="text/css"> #cgtrGrid { position: relative; z-index: 1; width: 769px; height: 370px; margin: 0px; padding: 2px; overflow: hidden; border: solid 1px; } #cgtrGrid li.product { display: block; position: absolute; background: #E8E8E8; padding: 0px; border: solid 1px #000000; overflow: hidden; font-size: 10px; white-space: nowrap; list-style: none outside; margin: 3px; } </style> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript"> var zoomed = false; var domCache = new Object (); var normalWidth = 146; var normalHeight = 66; function zoom () { console.log (this); if (!zoomed) { zoomed = true; thisElem = $(this); var thisCol = Math.floor (domCache [this.id].left / normalWidth); thisElem.css ('zIndex', 100).animate ({ width : (763) * 0.6, height : 362, top : 2, left : (763 * 0.4) * (thisCol / 4) }, 'normal'); } return (false); } function unzoom () { var thisElem = $(this); thisElem.animate ({ width : normalWidth, height : normalHeight, top : domCache [this.id].top, left : domCache [this.id].left }, 'normal', function () { zoomed = false; thisElem.css ('zIndex', 0); }); return (false); } $(document).ready (function () { $('.product').each (function () { var thisElem = $(this); domCache [this.id] = new Object ({ top : parseInt (thisElem.css ('top')), left : parseInt (thisElem.css ('left')) }); }); $('.product').hover (zoom, unzoom); }); </script> </head> <body> <ol id="cgtrGrid"> <li class="product" id="list_HPN0115" style="top: 2px; left: 2px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_TOSAT352" style="top: 2px; left: 156px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_LENNB064" style="top: 2px; left: 310px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_ACNB8064" style="top: 2px; left: 464px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_ACNB0573" style="top: 2px; left: 618px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_ACNB8060" style="top: 76px; left: 2px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_ACNB0572" style="top: 76px; left: 156px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_SONB0205" style="top: 76px; left: 310px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_HPN0103" style="top: 76px; left: 464px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_TOSAT355" style="top: 76px; left: 618px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_SONB0182" style="top: 150px; left: 2px; width: 146px; height: 66px; ">This is a test</li> <li class="product" id="list_SONB0202" style="top: 150px; left: 156px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_ACNB8055" style="top: 150px; left: 310px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_SONB0187" style="top: 150px; left: 464px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_HPN0102" style="top: 150px; left: 618px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_SONB0210" style="top: 224px; left: 2px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_SONB0204" style="top: 224px; left: 156px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_SONB0188" style="top: 224px; left: 310px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_HPN0072" style="top: 224px; left: 464px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_SONB0190" style="top: 224px; left: 618px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_HPNB0437" style="top: 298px; left: 2px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_TOSAT347" style="top: 298px; left: 156px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_A0219396" style="top: 298px; left: 310px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_ACNB8066" style="top: 298px; left: 464px; width: 146px; height: 66px;">This is a test</li> <li class="product" id="list_HPNB0456" style="top: 298px; left: 618px; width: 146px; height: 66px;">This is a test</li> </ol> </body> </html> On Aug 20, 5:31 pm, Stephan Beal <[EMAIL PROTECTED]> wrote: > On Aug 20, 6:25 pm, Gordon <[EMAIL PROTECTED]> wrote: > > > My first attempt simply did an animate () on the hovered item and > > another one when it was unhovered. this produced the desired scaling > > effect, but it also ran into a few problems when the mouse was moved > > over several items in quick succession. > > i think what you're looking for is the hoverIntent plugin: > > http://cherne.net/brian/resources/jquery.hoverIntent.html
