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

[Olivier Percebois-Garve]

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 wrote:
Hi everyone,

Someone asked me to try to replicate something he saw here:
http://www.andrewsellick.com/examples/tabslideV2-mootools/

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):
http://test.learningjquery.com/tabslide/

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. 

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):

    $(document).ready(function() {
      var $panelBodies = $('div.panel_body');
      $panelBodies.slice(1).hide();
      var slideTabs = function() {
        var $this = $(this);
        $this.parent().siblings().children('div.panel_body')
        .animate({height: 'hide'}, 300, function() {
          $(this).prev().removeClass('visible');
        });
      //  if ($panelBodies.filter(':animated').length < 2) {
          $this.next(':hidden').animate({height: 'show'}, 300, 
function() {
            $(this).prev().addClass('visible');
          });
      //  } 
      };
 
      $('div.panel_container > h3').mouseover(slideTabs);
    });


Can anybody help this poor lost boy? 

thanks,

--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com