Re: [jQuery] animate() support for custom tween/easing 'formulas'
On Sep 20, 2006, at 1:00 PM, herchenx wrote:
> Back to my problem. I have been as specific as I can on selecting
> the 4 divs
> to optimize performance:
>
> $(document).ready(function(){
> $("div#wrapper div.animated").animate({left:0,top:0},1000);
> }
>
> and without any additional easing or anything additional they are
> completely
> choppy in FF.
Hi John,
could you please provide a link to your test/example page so we can
take a look?
Also, not sure if it'll help the .animate() performance, but I think
DOM traversal will be easier for jQuery if you drop the first selectors.
> $(document).ready(function(){
> $("div.animated").animate({left:0,top:0},1000);
> }
Or, if you need the "wrapper" ID in there for specificity, drop "div"
in front of it. From what I've gleaned from this mailing list, best
practice is to identify IDs /without/ the element and classes /with/
the element. So, it could also look like this:
> $(document).ready(function(){
> $("#wrapper div.animated").animate({left:0,top:0},1000);
> }
Hope that help.
Karl
___
Karl Swedberg
www.englishrules.com
www.learningjquery.com
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
Steve, these look nice.
I should probably start a new thread, but this example you have provided is
an excellent jumping-off point for me to ask a question that is driving me
nuts right now with jquery.
You have a whole lot of content animating at one time and it runs fairly
smoothly.
I have 4 absolutely-positioned divs that I want to move into place when the
page loads. I initially had this done using prototype and the very slick
event-selectors.js from Justin Palmer
(http://encytemedia.com/event-selectors)
This worked very well, ran smoothly in IE and FF on a PC (Hadn't tested on a
mac yet).
I rebuilt it from a scriptaculous version I tried initially to lessen my
code - the scriptaculous version also worked extremely well.
I love the idea of jQuery, and when I initially tried to animate one of the
4 divs, it looked as though it was going to work very well. I added the
second animated div, then the third and noticed some slowness in FF. By the
time I added a fourth div, it was so choppy and inconsistent in FF that I
can't use it.
Meanwhile, somewhat ironically, it runs VERY smoothly in IE. (figure that
out)
The tie-in to animation is that I started this process by using GSGD's
methods for easing:
http://gsgd.co.uk/sandbox/jquery.easing.php
but they absolutely died when I tried running them simultaneously. I think
GSGD ran into the same problem, because I found this line in his HTML:
(commented out no doubt because of a dying processor)
Back to my problem. I have been as specific as I can on selecting the 4 divs
to optimize performance:
$(document).ready(function(){
$("div#wrapper div.animated").animate({left:0,top:0},1000);
}
and without any additional easing or anything additional they are completely
choppy in FF.
I would LOVE to switch to jQuery for this project, it looks very well done,
but this single issue COULD be a deal-breaker if I end up including other
libraries just to get the effect I want.
If anyone has any ideas of how I could improve performance in FF for this, I
would appreciate it.
John
http://www.daharsh.net
John Resig wrote:
>
>> I did some work in this area, too. If it's useful, it's BSD-ed.
>> http://mrclay.org/js/transition/
>
> That is /awesome/. I just keep watching them slide in over-and-over
> again. I've gotta add this in now ;-)
>
> --John
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/animate%28%29-support-for-custom-tween-easing-%27formulas%27-tf2169895.html#a6412179
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
I guess I'm turning into the Konqueror tester around here... :-) They seem to work properly in Konqueror now. The animation isn't perfectly smooth, but each one is working differently now. Perhaps some better name than "in" and "out" could be used? To me, "out" always means "at the expanded point". It seems like it's being used more for "start" and "end". That would be more descriptive. On Monday 04 September 2006 14:41, George Smith wrote: > Haha, yes it is :) > > I've taken it out for now, as Safari and Konq weren't getting it right, and > reverted to rewriting the whole function :( > > Can't test in Konqueror, so if someone can check that for me. > > How soon before we get a better way? Looking forward to that... > > Thanks, > George. > > John Resig wrote: > > Ok - that eval-rewrite thing is pretty scary ;-) I'll be sure to add > > in a proper way of doing it soon, so that you don't have to do it that > > way. Regardless, I like the final result. I'll be sure to let everyone > > know when the final code is ready. > > > > --John > > > > On 9/4/06, George Smith <[EMAIL PROTECTED]> wrote: > >> I've been working on this for a while, trying to work out the best way > >> of implementing this as a plugin whilst trying to keep as DRY as > >> possible, just > >> spotted this post, hope I'm not too late :) > >> > >> I finally figured out the easiest way of defining an ease method would > >> be to > >> bastardise the speed function rather than rewriting the animate > >> function. Also, using a bit of String, rewrite and eval prevented having > >> to redo the > >> whole fx function. I used a switch for the easing selection function. > >> > >> As a result this works great as a plugin. The standard effects start > >> using > >> the penner equations without having to change a line of code. And > >> specifying > >> custom ones uses all the standard effects. > >> > >> Check it out - http://gsgd.co.uk/sandbox/jquery.easing.php > >> http://gsgd.co.uk/sandbox/jquery.easing.php > >> > >> I'd love to hear if anyone can tell me how to not use a switch for the > >> easing function, not sure it's the best way, I'd like to be able to have > >> a > >> basic set of equations and then offer an extended set in a seperate > >> file, but couldn't work out how to go about this. Any pointers anyone? > >> > >> Cheers, > >> George. > >> > >> Jon Burger wrote: > >> > it would be good to be able > >> > to pass in a function to the animate method too - much like you can > >> > >> pass a > >> > >> > function into the default array .sort() method - this function would > >> > enable > >> > different styles of easing anmation. > >> > >> -- > >> View this message in context: > >> http://www.nabble.com/animate%28%29-support-for-custom-tween-easing-%27f > >>ormulas%27-tf2169895.html#a6133934 Sent from the JQuery forum at > >> Nabble.com. > >> > >> > >> ___ > >> jQuery mailing list > >> discuss@jquery.com > >> http://jquery.com/discuss/ > > > > -- > > John Resig > > http://ejohn.org/ > > [EMAIL PROTECTED] > > > > ___ > > jQuery mailing list > > discuss@jquery.com > > http://jquery.com/discuss/ -- Larry Garfield AIM: LOLG42 [EMAIL PROTECTED] ICQ: 6817012 "If nature has made any one thing less susceptible than all others of exclusive property, it is the action of the thinking power called an idea, which an individual may exclusively possess as long as he keeps it to himself; but the moment it is divulged, it forces itself into the possession of every one, and the receiver cannot dispossess himself of it." -- Thomas Jefferson ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
Haha, yes it is :) I've taken it out for now, as Safari and Konq weren't getting it right, and reverted to rewriting the whole function :( Can't test in Konqueror, so if someone can check that for me. How soon before we get a better way? Looking forward to that... Thanks, George. John Resig wrote: > > Ok - that eval-rewrite thing is pretty scary ;-) I'll be sure to add > in a proper way of doing it soon, so that you don't have to do it that > way. Regardless, I like the final result. I'll be sure to let everyone > know when the final code is ready. > > --John > > On 9/4/06, George Smith <[EMAIL PROTECTED]> wrote: >> >> I've been working on this for a while, trying to work out the best way of >> implementing this as a plugin whilst trying to keep as DRY as possible, >> just >> spotted this post, hope I'm not too late :) >> >> I finally figured out the easiest way of defining an ease method would be >> to >> bastardise the speed function rather than rewriting the animate function. >> Also, using a bit of String, rewrite and eval prevented having to redo >> the >> whole fx function. I used a switch for the easing selection function. >> >> As a result this works great as a plugin. The standard effects start >> using >> the penner equations without having to change a line of code. And >> specifying >> custom ones uses all the standard effects. >> >> Check it out - http://gsgd.co.uk/sandbox/jquery.easing.php >> http://gsgd.co.uk/sandbox/jquery.easing.php >> >> I'd love to hear if anyone can tell me how to not use a switch for the >> easing function, not sure it's the best way, I'd like to be able to have >> a >> basic set of equations and then offer an extended set in a seperate file, >> but couldn't work out how to go about this. Any pointers anyone? >> >> Cheers, >> George. >> >> >> Jon Burger wrote: >> > >> > it would be good to be able >> > to pass in a function to the animate method too - much like you can >> pass a >> > function into the default array .sort() method - this function would >> > enable >> > different styles of easing anmation. >> > >> >> -- >> View this message in context: >> http://www.nabble.com/animate%28%29-support-for-custom-tween-easing-%27formulas%27-tf2169895.html#a6133934 >> Sent from the JQuery forum at Nabble.com. >> >> >> ___ >> jQuery mailing list >> discuss@jquery.com >> http://jquery.com/discuss/ >> > > > -- > John Resig > http://ejohn.org/ > [EMAIL PROTECTED] > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/animate%28%29-support-for-custom-tween-easing-%27formulas%27-tf2169895.html#a6140897 Sent from the JQuery forum at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
Ok - that eval-rewrite thing is pretty scary ;-) I'll be sure to add in a proper way of doing it soon, so that you don't have to do it that way. Regardless, I like the final result. I'll be sure to let everyone know when the final code is ready. --John On 9/4/06, George Smith <[EMAIL PROTECTED]> wrote: > > I've been working on this for a while, trying to work out the best way of > implementing this as a plugin whilst trying to keep as DRY as possible, just > spotted this post, hope I'm not too late :) > > I finally figured out the easiest way of defining an ease method would be to > bastardise the speed function rather than rewriting the animate function. > Also, using a bit of String, rewrite and eval prevented having to redo the > whole fx function. I used a switch for the easing selection function. > > As a result this works great as a plugin. The standard effects start using > the penner equations without having to change a line of code. And specifying > custom ones uses all the standard effects. > > Check it out - http://gsgd.co.uk/sandbox/jquery.easing.php > http://gsgd.co.uk/sandbox/jquery.easing.php > > I'd love to hear if anyone can tell me how to not use a switch for the > easing function, not sure it's the best way, I'd like to be able to have a > basic set of equations and then offer an extended set in a seperate file, > but couldn't work out how to go about this. Any pointers anyone? > > Cheers, > George. > > > Jon Burger wrote: > > > > it would be good to be able > > to pass in a function to the animate method too - much like you can pass a > > function into the default array .sort() method - this function would > > enable > > different styles of easing anmation. > > > > -- > View this message in context: > http://www.nabble.com/animate%28%29-support-for-custom-tween-easing-%27formulas%27-tf2169895.html#a6133934 > Sent from the JQuery forum at Nabble.com. > > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > -- John Resig http://ejohn.org/ [EMAIL PROTECTED] ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
On Monday 04 September 2006 06:30, George Smith wrote: > Check it out - http://gsgd.co.uk/sandbox/jquery.easing.php > http://gsgd.co.uk/sandbox/jquery.easing.php Hm. In Konqueror, every one of the demos does exactly the same thing. Click one and it slides out, click a second time and it slides back, always the same speed. -- Larry Garfield AIM: LOLG42 [EMAIL PROTECTED] ICQ: 6817012 "If nature has made any one thing less susceptible than all others of exclusive property, it is the action of the thinking power called an idea, which an individual may exclusively possess as long as he keeps it to himself; but the moment it is divulged, it forces itself into the possession of every one, and the receiver cannot dispossess himself of it." -- Thomas Jefferson ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
I've been working on this for a while, trying to work out the best way of implementing this as a plugin whilst trying to keep as DRY as possible, just spotted this post, hope I'm not too late :) I finally figured out the easiest way of defining an ease method would be to bastardise the speed function rather than rewriting the animate function. Also, using a bit of String, rewrite and eval prevented having to redo the whole fx function. I used a switch for the easing selection function. As a result this works great as a plugin. The standard effects start using the penner equations without having to change a line of code. And specifying custom ones uses all the standard effects. Check it out - http://gsgd.co.uk/sandbox/jquery.easing.php http://gsgd.co.uk/sandbox/jquery.easing.php I'd love to hear if anyone can tell me how to not use a switch for the easing function, not sure it's the best way, I'd like to be able to have a basic set of equations and then offer an extended set in a seperate file, but couldn't work out how to go about this. Any pointers anyone? Cheers, George. Jon Burger wrote: > > it would be good to be able > to pass in a function to the animate method too - much like you can pass a > function into the default array .sort() method - this function would > enable > different styles of easing anmation. > -- View this message in context: http://www.nabble.com/animate%28%29-support-for-custom-tween-easing-%27formulas%27-tf2169895.html#a6133934 Sent from the JQuery forum at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
> I did some work in this area, too. If it's useful, it's BSD-ed. > http://mrclay.org/js/transition/ That is /awesome/. I just keep watching them slide in over-and-over again. I've gotta add this in now ;-) --John ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
Saturday, August 19, 2006, 1:50:17 PM, Jon Burger wrote: > have made generic - ie you pass in a property to tween and it's parent obj > (doesn't have to be a dom node) and you also pass in the 'tween function' - > these were all 'ported' from the robert penner originals that got used in > actionscript. I did some work in this area, too. If it's useful, it's BSD-ed. http://mrclay.org/js/transition/ -- Steve http://mrclay.org/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] animate() support for custom tween/easing 'formulas'
Jon - Yep - this is a great idea! I think there's been some progress made on it here: http://proj.jquery.com/dev/bugs/bug/127/ I'll see if I can get it in to jQuery 1.1 so that you can bundle your easing effects up as a single plugin and add it in. --John On 8/19/06, Jon Burger <[EMAIL PROTECTED]> wrote: > > Hi guys, > > I have written a fair few little tween functions/classes, all of which I > have made generic - ie you pass in a property to tween and it's parent obj > (doesn't have to be a dom node) and you also pass in the 'tween function' - > these were all 'ported' from the robert penner originals that got used in > actionscript. > > The cool thing about them is they are small and provide every type of easing > animation you could want - and they all take the same parameters (with the > exception of a few more complex ones like elastic and bounce which have one > or two more parameters) > > Now after that waffle I'd like to suggest that it would be good to be able > to pass in a function to the animate method too - much like you can pass a > function into the default array .sort() method - this function would enable > different styles of easing anmation. > > I might end up rewriting the animate method or making a new tween/ease one > if this isn't being worked on or considered at all. I don't really want to, > there are many better javascripters out there and I'd hate to make a sub-par > jquery extension. But since I'm porting a lot of my own ui scripts to > versions written using jquery (not as plugins), I will end up needing this > so unless someone else is working on it or fancies the idea then I will > start it in my spare time. > > Just a suggestion. > > Jon > > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > -- John Resig http://ejohn.org/ [EMAIL PROTECTED] ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
