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
On Oct 16, 9:41 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> Hi David,
>
> 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.
>
> --Karl
>
> On Oct 16, 2007, at 11:21 AM, David Serduke wrote:
>
>
>
>
>
> > 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 -- Hide quoted text -
>
> - Show quoted text -
