After playing during a while, and reading through a lot of posts, I got
that:
It works a little nicer, but il still kinda freezes when hovered too fast.
$('#producttabs ul li').each(function(){
$(this).append($(this).html());
$(this).children('a:nth-child(2)').hide();
$(this).hover(function(){
if
(!$(this).children('a:nth-child(2)').hasClass('over'))
$(this).children('a:nth-child(2)').hide().addClass('over');
$(this).children('a:nth-child(2)').addClass('over').hide().fadeIn('fast',
function(){$(this).animate({height:
'113px'},'fast').dequeue()}).dequeue();
},function(){
if
($(this).children('a:nth-child(2)').height() != '94px')
$(this).children('a:nth-child(2)').animate({height: '94px'},'slow',
function(){$(this).fadeOut('fast').dequeue()});
});
});
-Oliver
Olivier Percebois-Garve wrote:
Hi list
I am trying to make nice effects on hovering tabs. I have a working
animations, but it break when the menu is hovered too fast,
and fire the follow error if firebug : "this.parentNode has no
properties --> this.parentNode.removeChild( this );"
I guess there is some "collision" occuring, things being animate
whilst being removes by an event fired by another tab or so.
I would like to know if it is possible to control the execution of the
animation step after step.
$('#producttabs ul li a').hover(function(){
//animate and remove the hover state from
other tabs
$('#producttabs ul li
a').filter('.flasher').animate({height: '94px'},'fast', function(){
$(this).remove()});
//creat a copy of the tab
$(this).after($(this).parent().html());
//animate the copy of the tab
$(this).next().hide().addClass('flasher').addClass('over').fadeIn('fast').animate({height:
'115px'},'fast');
},function(){}
);
-Olivier
