I have a div that "drops down" thanks to jquery's slidetoggle and hover functions.
Inside that div I have some info (like the date, and a note counter) And I have three buttons. Two of them are tumblr buttons ( {LikeButton}, {ReblogButton} ) and the third is an entypo symbol.
I have to float them all to the right in their own seperate class or they overlap (A problem of tumblr's, their like and reblog buttons are not well made)
I've identified that it is the "float:right" css bit that is making my jquery slidetoggle dropdown 'jumpy'. (Or rather, it slides down, and in a millisecond slides up then down again, creating a jittery effect)
Does anyone know what might be causing this? Does anyone know a better way of lining up 3 spans on the right edge of a div (text-align:right doesn't work, I tried that already)
My test site is here: http://test-theme-one.tumblr.com
If it helps
Are you referring to the fact that when you mouse over it, it expands, then slightly retracts? If so try adding the min-height property set to the size of the icons to the .notes element and it seems to prevent this jittering.
Tip: I noticed if you mouse out right away it will jitter too because it calls the method at the same time. Set a flag when the animation initiates to prevent the other animation from starting. something like this pseudo code:
//Global Flag
flag = false;
-- start function --
//prevent animation if another animation is in progress.
if(flag) return;
flag = true;
your.animation(function(){
//callback (when animation is done)
flag = false; //rest flag
});
The reason why it jitters is because since the elements inside are set to float, the height of the parent element is not affected, therefor the animation treats it as if it's empty. But setting a min-height or just height compensates for that. I'm sure it's more complicated than that but that's what's going on in a nutshell.