[jQuery] queue, dequeue, stop, and the endless mouseovers

[jQuery] queue, dequeue, stop, and the endless mouseovers

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi everyone,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>Someone asked me to try to replicate something he saw here:</DIV><DIV><A href="http://www.andrewsellick.com/examples/tabslideV2-mootools/"> http://www.andrewsellick.com/examples/tabslideV2-mootools/</A></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>It looked pretty straightforward, and I was able to reproduce the main effect pretty easily -- except that the Moo tools one looks better because it doesn't try to slide up every tab when the mouse goes quickly over a number of them. You can see the problem with mine here (note, I changed the photo and tab colors to protect the innocent):</DIV><DIV><A href="http://test.learningjquery.com/tabslide/"> http://test.learningjquery.com/tabslide/</A></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I know this little problem can be resolved with the hoverIntent plugin, but I'd like to gain a better understanding of the new animation methods in jQuery 1.2, and I thought that one of them would help, but I can't quite get things to work. I tried various combinations of .queue() and .dequeue() and .stop(), but nothing worked right. </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>So here is what I have now. As you can see, I also tried using the new :animated selector, and that almost worked, but not quite (which is why it's commented out now):</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>    $(document).ready(function() {</DIV><DIV>      var $panelBodies = $('div.panel_body');</DIV><DIV>      $panelBodies.slice(1).hide();</DIV><DIV>      var slideTabs = function() {</DIV><DIV>        var $this = $(this);</DIV><DIV>        $this.parent().siblings().children('div.panel_body')</DIV><DIV>        .animate({height: 'hide'}, 300, function() {</DIV><DIV>          $(this).prev().removeClass('visible');</DIV><DIV>        });</DIV><DIV>      //  if ($panelBodies.filter(':animated').length < 2) {</DIV><DIV>          $this.next(':hidden').animate({height: 'show'}, 300, function() {</DIV><DIV>            $(this).prev().addClass('visible');</DIV><DIV>          });</DIV><DIV>      //  }  </DIV><DIV>      };</DIV><DIV>  </DIV><DIV>      $('div.panel_container > h3').mouseover(slideTabs);</DIV><DIV>    });</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Can anybody help this poor lost boy? </DIV><DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; ">thanks,<BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR></DIV></BODY></HTML>