Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

jQuery UI smooth transitions using CSS where possible

jQuery UI smooth transitions using CSS where possible

Problem

Is there a plugin / procedure / CSS line / different method to integrate with the Jquery UI framework so that it can take advantage of Hardware Accelerated transitions where possible.

For example one site is using a gallery that users the UI framework to slide images in and out on user clicks of corresponding arrows. I'd like this to be as smooth as possible.

Problem courtesy of: Robin Knight

Solution

You can access/add hardware accelerated css transforms using jQuery. However jQueryUI doesn't use css transforms for its stock animations.

This means that you would have to manually create a slide animation in css. An example,

 $("#myDiv").css("-webkit-transform", "translate3d(800px, 0px, 0px)"); 
 //or some other transform type, (this is specifically for webkit)

Then in your css, you'd need an easing function like:

#mydiv {
   -webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   -ms-transition:all 0.5s ease-in-out; 
   transition:all 0.5s ease-in-out; 
}

This will give you a hardware accelerated transition that moves #myDiv 800px to the right.

Solution courtesy of: Jlange

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

jQuery UI smooth transitions using CSS where possible

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×