[jQuery] Re: jQuery + iPhone, improving element animations

[persilj]

As I was curious and as I don't know how WebKit/Safari is doing the
animating internally, I made a testcase for comparison purposes:
http://datacalmers.hoito.org/iphonent/testcase-animate.php

Launch button 1 will toggle moving of the blue div-element from side
to side using a jQuery-animate.
Launch button 2 will toggle moving of the pink div-element from side
to side using a WebKit-transition.

Animating css-property 'left' will not give very satisfying results
neither when using WebKit-transitions. However, they do fancy me:
http://girliemac.com/iphone/anim.html


On 3 helmi, 00:08, Ricardo Tomasi  wrote:
> The best approach for the iPhone would be to use CSS3 animations, they
> run much smoother.

[jQuery] Re: jQuery + iPhone, improving element animations

[Ricardo Tomasi]

The best approach for the iPhone would be to use CSS3 animations, they
run much smoother.

Also, have you seen jQuery touch? Might be useful:
http://www.manifestinteractive.com/iphone/touch/

On Feb 2, 7:04 pm, persilj  wrote:
> I tend to create versions for different platforms and frameworks from
> my Nutrition tactician -webservice. It's basically an alternative
> interface to USDA-database, which contain nutritional values for lots
> of different foods.
>
> This time I wanted to make a version, which is especially crafted for
> iPhone-use. You may try it with Firefox or Safari, too. At the moment
> of writing IE gives a script-error, but I'll fix those minor bugs
> later.
>
> http://datacalmers.hoito.org/iphonent/
>
> However, I'm a bit disappointed at the sluggish movement of animated
> elements, but this seems to be problem in all of the webapplications
> for iPhone, which scroll an element from side to side. Or am I
> incorrect here? Should I try something else than just something like
> this:
>
> $('#nutritiondetails').animate({left : '100%', opacity : 'toggle'},
> 'slow');