As far as I can tell it has something to do with the orders in which callback events are called when one animation is started before another animation on the same element has ended. What can be done to solve this problem I don't know.
On Aug 28, 2:36 pm, Gordon <[EMAIL PROTECTED]> wrote: > Has nobody else run into problems with events firing in unexpected > ways or in apparently the wrong order or too quickly? This problem is > proving a real frustration and i can't find any way around it. I > thought the flag setting approach was a sensible one to prevent > unwanted functioning of the event handlers but it doesn't work > properly. > > Please please please, if anyone has any ideas, let me know because > this is proving a major frustration. > > On Aug 25, 4:12 pm, Gordon <[EMAIL PROTECTED]> wrote: > > > Anyone? > > > On Aug 24, 3:40 pm, Gordon <[EMAIL PROTECTED]> wrote: > > > > 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
