jQuery Forum

<span style="font-family: trebuchet ms;">The mootools one keeps "freezing" for me in FF/Vista.  I think yours feels smoother and acts better than the moo one.</span><br style="font-family: trebuchet ms;"><span style="font-family: trebuchet ms;">
RE: Queue:  It's over my head. :)</span><br style="font-family: trebuchet ms;"><span style="font-family: trebuchet ms;">Glen</span><br style="font-family: trebuchet ms;">
<div><span class="gmail_quote">On 10/13/07,
<b class="gmail_sendername">Karl Swedberg</b> <<a href="mailto:karl@englishrules.com">karl@englishrules.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div style="">Hi everyone,<div>
</div><div>Someone asked me to try to replicate something he saw here:</div><div><a href="http://www.andrewsellick.com/examples/tabslideV2-mootools/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.andrewsellick.com/examples/tabslideV2-mootools/</a></div><div>
</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/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://test.learningjquery.com/tabslide/</a></div><div>
</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>
</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>
</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>
</div><div>
</div><div>Can anybody help this poor lost boy? 
</div><div><div>
</div><div> <span style="border-collapse: separate; border-spacing: 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-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
thanks,
<span style="border-collapse: separate; border-spacing: 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-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
<div>
</div><div>--Karl</div><div>_________________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">www.englishrules.com</a>
</div><div><a href="http://www.learningjquery.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">www.learningjquery.com</a></div><div>
</div>
</span></span> </div>
</div></div></blockquote>
</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
Hi
I'm hijacking your thread to challenge you ( if its possible ;-) ).
I 'm trying (with no success) to do the same as you, but fades in
addition:
on over : hovered image fades in - tab goes up
on out :  tab goes down - image fades out
I tried a lot of different ways, with queue() dequeue(), using hover()
or onmousehover(),
using $this = $(this); really a lot of different variation and I got a
lot of different fancy results,
With most of times the hovers fx being repeated lots of times, some
strange flickering or so.
Any I'll kept trying, but any help, any pointer to a tutorial for
animations would be much appreciated.
-Olivier.
Karl Swedberg

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
Hi
although there is many things unclear to me in animations,
":animated" seems to work right.
I suggest  the addition  of a case around  the code in your slideTabs()
function : if (!$this.next().is(':animated'))
With console.log(), I noticed that over  events are being fired  far
more often than  necessary.
Using your menu, where  button are pretty small,  I  have normally the
over event being fired 2 times
when the tab slides up only one time. On mine with bigger buttons its
even more.
I found it important to reduce the number of events as low as the
strict necessary, because cpu/memory
use can increase drastically, when doing mad mouse moving, when
animation are chained or/and when they
run on  multiple elements
-Olivier
  var slideTabs = function() {
    var $this = $(this);
    console.log('before-');
    if (!$this.next().is(':animated')){
        resetClose();       
        console.log($this);
            console.log('-after');       
        $this.parent().siblings().children('div.panel_body')
        .animate({height: 'hide'}, 300, function() {
          $(this).prev().removeClass('visible');
        });
     
        if (idle == false) {
          $this.next(':hidden').animate({height: 'show'}, 300,
function() {
            $(this).prev().addClass('visible');
          });
        }
        }
  };
Karl Swedberg

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Olivier,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>You're right! Thanks a lot for the suggestion. </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>When I tested in Firebug, it didn't look like there were a lot of "before" logs firing without the "after" logs, but even having it happen just a few times warrants the extra ":animated" condition in there. </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Thanks again for testing and contributing! Much appreciated. <BR><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; "><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><DIV>On Oct 15, 2007, at 4:29 PM, Olivier Percebois-Garve wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"> Hi <BR> although there is many things unclear to me in animations,<BR> ":animated" seems to work right.<BR> <BR> I suggest  the addition  of a case around  the code in your slideTabs() function : if (!$this.next().is(':animated'))<BR> <BR> With console.log(), I noticed that over  events are being fired  far more often than  necessary.<BR> Using your menu, where  button are pretty small,  I  have normally the over event being fired 2 times<BR> when the tab slides up only one time. On mine with bigger buttons its even more.<BR> I found it important to reduce the number of events as low as the strict necessary, because cpu/memory<BR> use can increase drastically, when doing mad mouse moving, when animation are chained or/and when they<BR> run on  multiple elements <BR> <BR> -Olivier<BR> <BR>   var slideTabs = function() {<BR>     var $this = $(this);<BR>     console.log('before-');<BR>     if (!$this.next().is(':animated')){<BR>         resetClose();        <BR>         console.log($this);<BR>             console.log('-after');        <BR>         $this.parent().siblings().children('div.panel_body')<BR>         .animate({height: 'hide'}, 300, function() {<BR>           $(this).prev().removeClass('visible');<BR>         });<BR>      <BR>         if (idle == false) {<BR>           $this.next(':hidden').animate({height: 'show'}, 300, function() {<BR>             $(this).prev().addClass('visible');<BR>           });<BR>         }<BR>         }<BR>   };<BR> <BR> <BR> Karl Swedberg wrote: <BLOCKQUOTE cite="mid099165F4-EC8E-4041-B12E-479175038DA0@englishrules.com" type="cite">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; 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-indent: 0px; 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; 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-indent: 0px; 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><A class="moz-txt-link-abbreviated" href="http://www.englishrules.com">www.englishrules.com</A></DIV> <DIV><A class="moz-txt-link-abbreviated" href="http://www.learningjquery.com">www.learningjquery.com</A></DIV> <DIV><BR class="khtml-block-placeholder"> </DIV> <BR class="Apple-interchange-newline"> </SPAN></SPAN> </DIV> <BR> </DIV> </BLOCKQUOTE> <BR> </BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>

I suggest you change Oliver's check to see if ANY of the panels are
animating.
if ($this.parent().siblings().children().filter(':animated').length ==
0) {
I think that will give similar functionality to the original. Not
that it is ideal since in the mootools version you can move over a
panel and move back quickly (while it is still animating) and end up
pointing at a closed menu while the open one is not closed. That will
change as soon as you move the mouse though so perhaps it isn't so
awful.
David

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi David, <DIV><BR class="khtml-block-placeholder"></DIV><DIV>I tried something like that earlier, but if I land on a tab that I want opened while another tab is animated, I'll have to move out and then back over the tab for it to trigger. I still believe that there is some magic in those other methods (queue, etc.), but I haven't found it yet.<BR><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; "><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><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Oct 16, 2007, at 11:21 AM, David Serduke wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I suggest you change Oliver's check to see if ANY of the panels are</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">animating.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">if ($this.parent().siblings().children().filter(':animated').length ==</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">0) {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I think that will give similar functionality to the original.<SPAN class="Apple-converted-space">  </SPAN>Not</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">that it is ideal since in the mootools version you can move over a</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">panel and move back quickly (while it is still animating) and end up</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">pointing at a closed menu while the open one is not closed.<SPAN class="Apple-converted-space">  </SPAN>That will</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">change as soon as you move the mouse though so perhaps it isn't so</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">awful.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">David</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">On Oct 15, 5:47 pm, Karl Swedberg <k...@englishrules.com> wrote:</DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Olivier,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">You're right! Thanks a lot for the suggestion.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">When I tested in Firebug, it didn't look like there were a lot of <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">"before" logs firing without the "after" logs, but even having it <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">happen just a few times warrants the extra ":animated" condition in <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">there.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Thanks again for testing and contributing! Much appreciated.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">--Karl</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">_________________</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Karl Swedbergwww.englishrules.comwww.learningjquery.com</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">On Oct 15, 2007, at 4:29 PM, Olivier Percebois-Garve wrote:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Hi</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">although there is many things unclear to me in animations,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">":animated" seems to work right.</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I suggest<SPAN class="Apple-converted-space">  </SPAN>the addition<SPAN class="Apple-converted-space">  </SPAN>of a case around<SPAN class="Apple-converted-space">  </SPAN>the code in your <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">slideTabs() function : if (!$this.next().is(':animated'))</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">With console.log(), I noticed that over<SPAN class="Apple-converted-space">  </SPAN>events are being fired <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">far more often than<SPAN class="Apple-converted-space">  </SPAN>necessary.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Using your menu, where<SPAN class="Apple-converted-space">  </SPAN>button are pretty small,<SPAN class="Apple-converted-space">  </SPAN>I<SPAN class="Apple-converted-space">  </SPAN>have normally <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">the over event being fired 2 times</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">when the tab slides up only one time. On mine with bigger buttons <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">its even more.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I found it important to reduce the number of events as low as the <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">strict necessary, because cpu/memory</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">use can increase drastically, when doing mad mouse moving, when <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">animation are chained or/and when they</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">run on<SPAN class="Apple-converted-space">  </SPAN>multiple elements</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">-Olivier</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">  </SPAN>var slideTabs = function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">    </SPAN>var $this = $(this);</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">    </SPAN>console.log('before-');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">    </SPAN>if (!$this.next().is(':animated')){</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>resetClose();</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>console.log($this);</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">            </SPAN>console.log('-after');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>$this.parent().siblings().children('div.panel_body')</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>.animate({height: 'hide'}, 300, function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">          </SPAN>$(this).prev().removeClass('visible');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>});</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>if (idle == false) {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">          </SPAN>$this.next(':hidden').animate({height: 'show'}, 300, <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">            </SPAN>$(this).prev().addClass('visible');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">          </SPAN>});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>}</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>}</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">  </SPAN>};</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Karl Swedberg wrote:</DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Hi everyone,</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Someone asked me to try to replicate something he saw here:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://www.andrewsellick.com/examples/tabslideV2-mootools/">http://www.andrewsellick.com/examples/tabslideV2-mootools/</A></DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">It looked pretty straightforward, and I was able to reproduce the <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">main effect pretty easily -- except that the Moo tools one looks <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">better because it doesn't try to slide up every tab when the mouse <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">goes quickly over a number of them. You can see the problem with <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">mine here (note, I changed the photo and tab colors to protect the <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">innocent):</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://test.learningjquery.com/tabslide/">http://test.learningjquery.com/tabslide/</A></DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I know this little problem can be resolved with the hoverIntent <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">plugin, but I'd like to gain a better understanding of the new <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">animation methods in jQuery 1.2, and I thought that one of them <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">would help, but I can't quite get things to work. I tried various <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">combinations of .queue() and .dequeue() and .stop(), but nothing <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">worked right.</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">So here is what I have now. As you can see, I also tried using the <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">new :animated selector, and that almost worked, but not quite <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">(which is why it's commented out now):</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">    </SPAN>$(document).ready(function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">      </SPAN>var $panelBodies = $('div.panel_body');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">      </SPAN>$panelBodies.slice(1).hide();</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">      </SPAN>var slideTabs = function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>var $this = $(this);</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>$this.parent().siblings().children('div.panel_body')</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>.animate({height: 'hide'}, 300, function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">          </SPAN>$(this).prev().removeClass('visible');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">        </SPAN>});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">      </SPAN>//<SPAN class="Apple-converted-space">  </SPAN>if ($panelBodies.filter(':animated').length < 2) {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">          </SPAN>$this.next(':hidden').animate({height: 'show'}, 300, <SPAN class="Apple-converted-space"> </SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">function() {</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">            </SPAN>$(this).prev().addClass('visible');</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">          </SPAN>});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">      </SPAN>//<SPAN class="Apple-converted-space">  </SPAN>}</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">      </SPAN>};</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">      </SPAN>$('div.panel_container > h3').mouseover(slideTabs);</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space">    </SPAN>});</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Can anybody help this poor lost boy?</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">thanks,</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">--Karl</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">_________________</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Karl Swedberg</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">www.englishrules.com</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">www.learningjquery.com- Hide quoted text -</DIV> </BLOCKQUOTE></BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">- Show quoted text -</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> </BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>

I'll look at it again then. I was trying to duplicate the
functionality of the mootools menu and it has that same "design
flaw". You don't actually have to move out and back in again but
rather just move within the tab since it is mousemove and not
mouseover.
David

Ack, nevermind that last comment about mousemove. I looked at the
wrong even handler.
David

Sorry but I took some liberties with your code. Hopefully that is ok.
http://www.exfer.net/test/jquery/tabslide/
I'd be interested to know if that is more like what you wanted.
David

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
What if instead of stopping the function when it does not pass the
check,
we add a else statement that calls back the function using a small
timeout ?
I think that this would prevent the case you describe.(that I noticed
also on my own script)
-Olivier
Karl Swedberg wrote:
<blockquote
cite="mid2FF197FC-ADE6-42AA-8F0A-142CD0A4338D@englishrules.com"
type="cite">Hi David, 
<div><br class="khtml-block-placeholder">
</div>
<div>I tried something like that earlier, but if I land on a tab that
I want opened while another tab is animated, I'll have to move out and
then back over the tab for it to trigger. I still believe that there is
some magic in those other methods (queue, etc.), but I haven't found it
yet.
<div> <span class="Apple-style-span"
style="border-collapse: separate; border-spacing: 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-indent: 0px; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px;"><br
class="Apple-interchange-newline">
<span class="Apple-style-span"
style="border-collapse: separate; border-spacing: 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-indent: 0px; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px;">
<div><br class="khtml-block-placeholder">
</div>
<div>--Karl</div>
<div><br class="khtml-block-placeholder">
</div>
<br class="Apple-interchange-newline">
</span></span> </div>

<div>
<div>On Oct 16, 2007, at 11:21 AM, David Serduke wrote:</div>
<br class="Apple-interchange-newline">
<blockquote type="cite">
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">I suggest you change Oliver's check to
see if ANY of the panels are</div>
<div style="margin: 0px;">animating.</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">if
($this.parent().siblings().children().filter(':animated').length ==</div>
<div style="margin: 0px;">0) {</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">I think that will give similar
functionality to the original.<span class="Apple-converted-space">  </span>Not</div>
<div style="margin: 0px;">that it is ideal since in the mootools
version you can move over a</div>
<div style="margin: 0px;">panel and move back quickly (while it is
still animating) and end up</div>
<div style="margin: 0px;">pointing at a closed menu while the open
one is not closed.<span class="Apple-converted-space">  </span>That
will</div>
<div style="margin: 0px;">change as soon as you move the mouse
though so perhaps it isn't so</div>
<div style="margin: 0px;">awful.</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">David</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">On Oct 15, 5:47 pm, Karl Swedberg
<a class="moz-txt-link-rfc2396E" href="mailto:k...@englishrules.com"><k...@englishrules.com></a> wrote:</div>
<blockquote type="cite">
<div style="margin: 0px;">Olivier,</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">You're right! Thanks a lot for the
suggestion.</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">When I tested in Firebug, it didn't
look like there were a lot of <span class="Apple-converted-space"> </span></div>
<div style="margin: 0px;">"before" logs firing without the
"after" logs, but even having it <span class="Apple-converted-space"> </span></div>
<div style="margin: 0px;">happen just a few times warrants the
extra ":animated" condition in <span class="Apple-converted-space"> </span></div>
<div style="margin: 0px;">there.</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">Thanks again for testing and
contributing! Much appreciated.</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">--Karl</div>
<div style="margin: 0px;">_________________</div>
<div style="margin: 0px;">Karl
Swedbergwww.englishrules.comwww.learningjquery.com</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px;">On Oct 15, 2007, at 4:29 PM, Olivier
Percebois-Garve wrote:</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<div style="margin: 0px; min-height: 14px;">
</div>
<blockquote type="cite">
<div style="margin: 0px;">Hi</div>
<div style="margin: 0px;">although there is many things unclear
to me in animations,</div>
<div style="margin: 0px;">":animated" seems to work right.</div>
</blockquote>
<div style="margin: 0px; min-height: 14px;">
</div>
<blockquote type="cite">
<div style="margin: 0px;">I suggest<span
class="Apple-converted-space">  </span>the addition<span
class="Apple-converted-space">  </span>of a case around<span
class="Apple-converted-space">  </span>the code in your <span
class="Apple-converted-space"> </span></div>
<div style="margin: 0px;">slideTabs() function : if
(!$this.next().is(':animated'))</div>
</blockquote>
<div style="margin: 0px; min-height: 14px;">
</div>
<blockquote type="cite">
<div style="margin: 0px;">With console.log(), I noticed that
over<span class="Apple-converted-space">  </span>events are being
fired <span class="Apple-converted-space"> </span></div>
<div style="margin: 0px;">far more often than<span
class="Apple-converted-space">  </span>necessary.</div>
<div style="margin: 0px;">Using your menu, where<span
class="Apple-converted-space">  </span>button are pretty small,<span
class="Apple-converted-space">  </span>I<span
class="Apple-converted-space">  </span>have normally <span
class="Apple-converted-space"> </span></div>
<div style="margin: 0px;">the over event being fired 2 times</div>
<div style="margin: 0px;">when the tab slides up only one time.

Hmm, why do my posts not go through?
http://www.exfer.net/test/jquery/tabslide/
David

Hmm, ok, I'll try this google group in Firefox once. I've posted 4-
ish posts today that haven't gone through.
Anyway as I said in one of them, I took some liberties with the code,
but is this more like what you were going after?
http://www.exfer.net/test/jquery/tabslide/
David

Well this google group has been eating my posts all day. One last
attempt (I quit and rejoined the group).
Is this functionality what you were thinking of?
http://www.exfer.net/test/jquery/tabslide/
David

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><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; "><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; "><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Oct 16, 2007, at 4:37 PM, David Serduke wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Sorry but I took some liberties with your code. Hopefully that is ok.</DIV></BLOCKQUOTE><DIV><BR class="khtml-block-placeholder"></DIV>Hey David, <DIV>No apology necessary. Of course it's ok! :-)</DIV><BR><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://www.exfer.net/test/jquery/tabslide/">http://www.exfer.net/test/jquery/tabslide/</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I'd be interested to know if that is more like what you wanted.</DIV></BLOCKQUOTE><DIV><BR class="khtml-block-placeholder"></DIV><DIV><DIV>It looks really good! I'm not sure now which I prefer, but I really appreciate your spending the time on it and working through the queue and stop stuff (and also dealing with the headache of Google Groups damming the flow of posts). Anyway, I was working on it for someone else, so ultimately it's up to him. I think yours is closer to the Mootools one, but still isn't exactly the same, because the Moo tabs don't slide at all if one is currently animated, whereas yours will slide up just a bit and then slide back down. Not a big deal, and it's closer than I got.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I think I'm going to write up a quick entry about what I came up with. Mind if I link to yours as an alternative?</DIV><DIV><DIV><DIV><BR class="khtml-block-placeholder"></DIV></DIV></DIV><BR class="khtml-block-placeholder"></DIV><DIV>On Oct 16, 2007, at 2:50 PM, David Serduke wrote:</DIV><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I'll look at it again then.  I was trying to duplicate the</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">functionality of the mootools menu and it has that same "design</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">flaw".  You don't actually have to move out and back in again but</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">rather just move within the tab since it is mousemove and not</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">mouseover.</DIV></BLOCKQUOTE><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Yeah, I was interested to see in the Mootools example that he used both mouseover and mousemove. Not sure that was the best way to deal with the situation.<BR></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>$(panels[i].getElementsByTagName('h3')[0]).addEvent('mouseover', accordion);</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>$(panels[i].getElementsByTagName('h3')[0]).addEvent('mousemove', accordion);</DIV></BLOCKQUOTE></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR></DIV><BR></DIV></BODY></HTML>

No problem at all

I don't understand why this kid has to use html in every question, and response, not like we don't have to stare at it all day.