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 -
