Yup, setting the individual padding improves matters slightly if you set
the 4 individuals in CSS
IE - works, as before
Opera - works, as before
FF - jumps to zero, then animates
Safari - jumps to zero, then animates
Chrome - jumps to zero, then animates
The only way to get all 5 browsers to work is
1) Set all 4 paddings individually in the CSS : padding-left,
padding-right, etc
2) Animate all 4 paddings using paddingLeft, paddingRight, etc
So your observation is correct, Jason:
"If you want to animate padding (or margin), you either have to specify
each one in the first argument, or explicitly set the initial padding on
the element (as opposed to via a stylesheet)."
Sorry if I misinterpreted your original post that it was throwing an
error....
L
Jason Persampieri wrote:
Oh... gotcha. Yes, mine doesn't error-out either. It's just that if
I'm trying to animate to 12px from whatever is currently set in the
stylesheet, the padding first 'jumps' to 0px, then animates to 12px.
So, for yours, maybe if you tried setting the 4 sides individually (or
set the padding on the element directly), it would fix your
'jumpiness' as well?
_jason
On May 22, 6:51 am, Liam Byrne <l...@onsight.ie> wrote:
It has worked for me by just setting a single value in the CSS and using
a single value in the animate function; as I said, the only issue I
encountered was that FF, Chrome & Safari "jumped" as if I'd simply set
the value.
Maybe that's related to what you're seeing, but it "works" on some level
without giving an error
Liam
Jason Persampieri wrote:
The problem occurs when trying to determine the 'start' value.
getComputedStyle explodes 'padding' into its four individual
components. If you want to animate padding (or margin), you either
have to specify each one in the first argument, or explicitly set the
initial padding on the element (as opposed to via a stylesheet).
On May 21, 12:16 pm, Liam Byrne <l...@onsight.ie> wrote:
Maybe I'm wrong, but I think
myElement.animate( {padding: 12px} )
won't work anyway ? Shouldn't it be
myElement.animate( {padding: 12} )
That said, tests here show that only IE & Opera offer a smooth animation
- the others (FF, Chrome & Safari) seem to jump
L
Jason Persampieri wrote:
(Firefox 3.0.10, OS X)
I am setting a padding value via a stylesheet and trying to animate it
-
- CSS
myElement { padding: 20px }
- Javascript
myElement.animate( {padding: 12px} )
When calculating the start padding value, jQuery calls
'getComputedStyle'. Unfortunately,
computedStyle.padding = ""
computedStyle.padding-top = "20px"
computedStyle.padding-right = "20px"
computedStyle.padding-bottom = "20px"
computedStyle.padding-left = "20px"
and the call to 'getPropertyValue' returns an empty string (which is
translated to 0px).
Would this be considered a jQuery or Firefox issue?
------------------------------------------------------------------------
No virus found in this incoming message.
Checked by AVG -www.avg.com
Version: 8.5.339 / Virus Database: 270.12.36/2126 - Release Date: 05/21/09
06:22:00
------------------------------------------------------------------------
No virus found in this incoming message.
Checked by AVG -www.avg.com
Version: 8.5.339 / Virus Database: 270.12.36/2128 - Release Date: 05/22/09
06:03:00
------------------------------------------------------------------------
No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.339 / Virus Database: 270.12.36/2128 - Release Date: 05/22/09 06:03:00
