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
On Oct 15, 5:47 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> Olivier,
>
> You're right! Thanks a lot for the suggestion.
>
> 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.
>
> Thanks again for testing and contributing! Much appreciated.
>
> --Karl
> _________________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Oct 15, 2007, at 4:29 PM, Olivier Percebois-Garve wrote:
>
>
>
> > 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- Hide quoted text -
>
> - Show quoted text -
