Question

I’ve been trying to animate DOM elements using transitions alone, since I’ve read they’re better in many forms. However, My question is simple, Is there a way to pass dynamic values for an animation using transitions? I basically don’t know how to do this, ie. I can only animate a DOM element by adding a class with fixed values as seen in this example (Works well on webkit browsers)

As you can see in the CSS class:

.motion {
  left: 300px;
  top: 200px;
  position: absolute;
}

… The values for the animation are static, And I would like to know How can I pass parameters to a transition during runtime?, (ie. a different value for left. for example)

I’ve tried to do it with jQuery through the .css() method like this:

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '30', 'top': '100' });          
  });
}​

But for some reason the transition doesn’t get triggered. Why?

All help is immensely appreciated!

Answer 1

Alright, since your comments show that you like it, here is your answer:

Use jQuery Transit.

It supports easing functions as you wish.

It has an animate-like API, and it can fallback to animate when CSS3 transitions are not supported.