Is it me, or is the DOM method a little bit faster than the CSS one (FF
2.0.0.6 Mac OS 10.4.10 Intel)? I would think that they'd both be the same
speed. Having said that, seeing the DOM move all the blocks in unison like
that is f'ing awesome!
--Aaron
On 8/20/07, John Resig [EMAIL PROTECTED]
It's very deceptive because there's two completely different style of
animations occurring here. The DOM one is doing: Finish the
animation in X amount of time, dropping as many frames as you need in
order to make it happen. the CSS one is doing: Do Y number of
frames, finish whenever you can. -
On Aug 20, 7:18 am, John Resig [EMAIL PROTECTED] wrote:
I've re-done the original demo using jQuery's step function (dunno why
I didn't think of this before). Much
improved:http://dev.jquery.com/~john/ticket/animatetest/
error: console is not defined
??
console.log() is called a couple of
I got that error in IE7, but not in FF.
RE: Perceived speed. The way john fixed it is accurate in terms of
speed/time, which means the other one is not accurate. Most animations are
only 1 or a couple of elements, so this distortion shouldn't be noticeable.
Nothing to do, just interesting to
i can't find any documentation on the 'step' function ?
Stephan Beal wrote:
On Aug 20, 7:18 am, John Resig [EMAIL PROTECTED] wrote:
I've re-done the original demo using jQuery's step function (dunno why
I didn't think of this before). Much
Oops, haha, that's what I get for leaving in my debugging code. Try again.
--John
On 8/20/07, Stephan Beal [EMAIL PROTECTED] wrote:
On Aug 20, 7:18 am, John Resig [EMAIL PROTECTED] wrote:
I've re-done the original demo using jQuery's step function (dunno why
I didn't think of this
When I tried to do this same test with easing, I got an infinite loop
error. Does that happen with your new method?
I received infinite loop errors last time I tried to use easing
(1.1.1) with jQuery 1.1.3 and couldn't pinpoint the problem (I'm not
good with the jQuery animation source code).
John, that's a very cute trick that I had not thought of. Can that
internalized inside the animate so all animations gain that benefit?
~Sean
On 8/20/07, John Resig [EMAIL PROTECTED] wrote:
I've re-done the original demo using jQuery's step function (dunno why
I didn't think of this before).
Jeroen Coumans wrote:
On Jul 5, 9:56 pm, Scott Sauyet [EMAIL PROTECTED] wrote:
I don't want to discourage you from trying, but I think it's more
complicated than this. Specificity has to do with the number of id's,
the number of classes (and pseudo-classes), and the number of elements
in the
Not exactly sure what you are saying as far as the selectors go, but a
plugin should work for now and can be called like:
$('.myClass').cssAnimate({params});
and the params should have to be what is in the style sheet and the set the
end animation points, ie:
assuming the css is:
.myClass{
I'll whip up a plugin when I get a chance.
It will act and feel just like the current $.animate but use classes instead
of DOM styling.
~Sean
Sean, that would be great.
On 7/9/07, Sean Catchpole [EMAIL PROTECTED] wrote:
I'll whip up a plugin when I get a chance.
It will act and feel just like the current $.animate but use classes
instead of DOM styling.
~Sean
--
Benjamin Sterling
http://www.KenzoMedia.com
Lurvely
I have a real world example where I can immediately try this out on:
http://64squar.es.
When the chess pieces appear initially, they all slide onto the board.
It's a bit jerky really - esp since its trying to move 32 x 60x60 pngs
with alpha channel.
It's currently somewhat jerky, so i'd
On 7/9/07, weepy [EMAIL PROTECTED] wrote:
When the chess pieces appear initially, they all slide onto the board.
It's a bit jerky really - esp since its trying to move 32 x 60x60 pngs
with alpha channel.
There are lots of browser limitations with working with PNGs.
But more importantly, this
they are different animations - but it should be easy to bunch them
all together.
On Jul 9, 5:56 pm, Sean Catchpole [EMAIL PROTECTED] wrote:
On 7/9/07, weepy [EMAIL PROTECTED] wrote:
When the chess pieces appear initially, they all slide onto the board.
It's a bit jerky really - esp
Its only relevant if you are changing a bunch of stuff at the exact same
time.
Here is a real world example:
A grid, similar to EXT's grid.
Capabilities with a large number of rows: Sorting, Selecting (shift
select), adding, deleting, re-ordeing via drag, changing height (excel
type), changing
On 7/9/07, Glen Lipka [EMAIL PROTECTED] wrote:
A big question in my mind is: On a slow machine with ONE animation: Is
doing it this way smoother than not? Does CSS manipulation of a single
animation make it smoother? What is the gating factor for a slow computer?
CPU or Ram or Video card?
Simple fix: provide a CSS file with the plugin which the author can
integrate themselves. Then selectors can be made as specific as
needed, and it would enable lots of CSS-savy designers with little
Javascript skills to customize the effects.
--
Jeroen Coumans
On Jul 5, 9:56 pm, Scott Sauyet
Thanks for looking into this, I'm really impressed with the work
that's been done on the basis of a wild speculation I had while trying
to think up ways of making the animation of lots of items
smoother. :)
Regarding the CSS cascade problem, would making any custom rules
jQuery creates
On 7/6/07, Gordon [EMAIL PROTECTED] wrote:
Regarding the CSS cascade problem, would making any custom rules
jQuery creates !important help?
I initially looked into this and tried to implement it with no success.
However after rewriting the script bout 5 times, I got it!
I have updated the
So are the results still the same?
Looks like:
DOM Profile (1330.403ms, 79446 calls)
CSS Profile (1249.132ms, 173 calls)
I have a question.
Take a look at this page:
http://www.commadot.com/jquery/animate/animatetest.htm
When you click animate in any browser, you can see how it is doing them
On 7/6/07, Glen Lipka [EMAIL PROTECTED] wrote:
I have a question.
Take a look at this page:
http://www.commadot.com/jquery/animate/animatetest.htm
Hey Glen, I liked your example, so I've taken it and applied the css
animation concept.
http://www.sunsean.com/animatetest.html
The results are
Ok, so to go back to the original intent of this thread:
Does it make sense to consider changing how jQuery (core) executes
animations?
Or is this something that should be a plugin?
It makes animations much more predictable and efficient, but are there
enough real world use cases.
Glen
On
For the time being, I think it should be a plugin, maybe one that adds
to/extends the .animate() function.
But I would argue that there has to be some real world examples created.
Maybe take a plugin that does some animation already and recreate it using
the css method. For instance, I have a
Hi Gordon,
There is an extension to the .animate() method in Interface that
allows you to animate classes. Perhaps it's more in line with what
you're looking for?
See the demo here:
http://interface.eyecon.ro/demos/animate.html
--Karl
_
Karl Swedberg
That wasn't quite what I was getting at. While the ability to morph
between one class and another is quite nifty, as far as I can tell, it
stil works by modifying the style attribute of the target elements.
What I'm suggesting is a speed optimization, where animation is
achieved by modifying a
Gordon,
So you are saying that if you have a class:
.theAnimateClass{
position:absolute;
left:0px;
}
That the class params should change, not the inline params to that
particular element:
ie, you want to move the element with the class name of theAnimateClass for
current position (0px) to
Yes, that's what I'm getting at. Like I said, I noticed with my
jQuery coding and script optimization efforts that DOM access has
quite a significant overhead, and that jQuery animates by manipulating
the DOM style attribute for all elements being animated. If it were
possible to manipulate the
Gordon,
I put together a very quick example, although it does not run in ie6 (which
I am sure there is a fix for) it looks OK in FF.
http://www.benjaminsterling.com/experiments/jqAnimatedStyles/
The functions are from:
http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
On 7/5/07,
, July 05, 2007 2:25 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Feature suggestion: animating through stylesheets
I agree, I profiled each:
DOM:Profile (2296.875ms, 49015 calls)
CSS: Profile (437.5ms, 143 calls)
With the dom, there a bit of a gradient affect, more noticeable on IE6
On 7/5/07, Dan G. Switzer, II [EMAIL PROTECTED] wrote:
The CSS effect works in IE6 for me—provided I run it first. However, it's much,
much slower. I'm not sure if it's IE's re-rendering of the CSS or if it's in
the fade() function.
I'm not sure either, but it could be that I'm using
.
--
*From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On
Behalf Of *Benjamin Sterling
*Sent:* Thursday, July 05, 2007 2:25 PM
*To:* jquery-en@googlegroups.com
*Subject:* [jQuery] Re: Feature suggestion: animating through stylesheets
I agree, I profiled each:
DOM:Profile
On 7/5/07, Dan G. Switzer, II [EMAIL PROTECTED] wrote:
The CSS effect works in IE6 for me-provided I run it first. However, it's
much, much slower. I'm not sure if it's IE's re-rendering of the CSS or if
it's in the fade() function.
I'm not sure either, but it could be that I'm using Timeouts
It brings up an interesting point. All the speed tests are to FIND the
selectors.
What about speed tests in terms of how fast to CHANGE attributes. Or how
fast/smooth/lowest CPU to animate?
Just goes to my pet peeve: The speed tests are flawed.
Glen
On 7/5/07, Dan G. Switzer, II [EMAIL
[mailto:jquery-en@googlegroups.com
mailto:jquery-en@googlegroups.com] *On Behalf Of *Benjamin Sterling
*Sent:* Thursday, July 05, 2007 2:25 PM
*To:* jquery-en@googlegroups.com mailto:jquery-en@googlegroups.com
*Subject:* [jQuery] Re: Feature suggestion: animating through
On 7/5/07, Rey Bango [EMAIL PROTECTED] wrote:
The CSS option (http://www.sunsean.com/cssAnimate.html) doesn't run for
me in IE7.
It worked for me, but only once.
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]
http://aheimlich.freepgs.com
Sean Catchpole wrote:
[ ... ] http://www.sunsean.com/cssAnimate.html [ ... ]
I think this is an interesting idea. Perhaps jQuery should apply a
unique class to the elements it's going to animate, then manipulate
the css instead of the dom.
This is an interesting idea. But I see one major
Good point Glen, I've updated my example so that finds and saves the td's.
Now all that should be profiled are the animations.
http://www.sunsean.com/cssAnimate.html
~Sean
On 7/5/07, Glen Lipka [EMAIL PROTECTED] wrote:
It brings up an interesting point. All the speed tests are to FIND the
Scott,
You bring up an excellent point. However if we can temporarily create
a unique className (say jQueryAnimation+timestamp) for the duration
of the animation, then specificty won't be a problem.
I'll go ahead and convert this all into a plugin and we can really see
if it's useful. There
On 7/5/07, Glen Lipka [EMAIL PROTECTED] wrote:
DOM Profile (1705.165ms, 119624 calls)
CSS Profile (286.028ms, 143 calls)
So does this mean the dom was faster even though it had so many more
calls?
No, it means that DOM took significantly more time to complete and made
significantly more
suggestion: animating through stylesheets
Good point Glen, I've updated my example so that finds and saves the td's.
Now all that should be profiled are the animations.
http://www.sunsean.com/cssAnimate.html
~Sean
On 7/5/07, Glen Lipka [EMAIL PROTECTED] wrote:
It brings up an interesting
Sean Catchpole wrote:
You bring up an excellent point. However if we can temporarily create
a unique className (say jQueryAnimation+timestamp) for the duration
of the animation, then specificty won't be a problem.
I don't want to discourage you from trying, but I think it's more
complicated
On 7/5/07, Rick Faircloth [EMAIL PROTECTED] wrote:
I noticed that the example runs in DOM mode
anytime, but CSS mode will only run if the page
is refreshed and CSS is tried first.
After DOM mode has run, CSS no longer works.
Clearly there are bugs. =(
And is the effect supposed to be a
-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Sean Catchpole
Sent: Thursday, July 05, 2007 3:27 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Feature suggestion: animating through stylesheets
Good point Glen, I've updated my example so that finds
Both took less time, but the DOM had more calls, hmmm...
On 7/5/07, Sean Catchpole [EMAIL PROTECTED] wrote:
Good point Glen, I've updated my example so that finds and saves the
td's.
Now all that should be profiled are the animations.
http://www.sunsean.com/cssAnimate.html
~Sean
On 7/5/07,
I found this in reference to IE and filters (posted by Dean Edwards):
Filters only apply to elements with layout:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
An obscure Microsoft concept to differentiate between it's different
rendering models. Annoying
You can also give an element a css attribute of zoom:1 to trigger haslayout.
This is an awesome expose of the subject:
http://www.satzansatz.de/cssd/onhavinglayout.html
Glen
On 7/5/07, Joe Knizacky [EMAIL PROTECTED] wrote:
I found this in reference to IE and filters (posted by Dean Edwards):
47 matches
Mail list logo
