[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
No problem at all On Oct 16, 7:54 pm, Karl Swedberg [EMAIL PROTECTED] wrote: 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?
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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 -
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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 -
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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:
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 -
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
Ack, nevermind that last comment about mousemove. I looked at the wrong even handler. David
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
Hmm, why do my posts not go through? http://www.exfer.net/test/jquery/tabslide/ David
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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
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
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
Hmm, this google group seems to be eating my messages from the browser client so now I'll try emailing to it and see if that is any different. Anyway, see if this is more like the design you were interested in. http://www.exfer.net/test/jquery/tabslide/ David P.S. Beware at some point my 6 posts might come flooding in so... Sorry in advance!
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
On Oct 16, 2007, at 4:37 PM, David Serduke wrote:
Sorry but I took some liberties with your code. Hopefully that is ok.
Hey David,
No apology necessary. Of course it's ok! :-)
http://www.exfer.net/test/jquery/tabslide/
I'd be interested to know if that is more like what you wanted.
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.
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?
On Oct 16, 2007, at 2:50 PM, David Serduke wrote:
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.
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.
$(panels[i].getElementsByTagName('h3')[0]).addEvent('mouseover',
accordion);
$(panels[i].getElementsByTagName('h3')[0]).addEvent('mousemove',
accordion);
--Karl
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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 Swedberg
www.englishrules.com
www.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
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
The mootools one keeps freezing for me in FF/Vista. I think yours feels
smoother and acts better than the moo one.
RE: Queue: It's over my head. :)
Glen
On 10/13/07, Karl Swedberg [EMAIL PROTECTED] 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
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
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 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
