Using JQuery to set CSS Keyframe

Question

I\'m trying to determine the height of a div which is dynamic depending on the size of the text. I was trying to set this dynamically within the CSS as my origi

Answer 1

I managed to achieve activating a keyframe by creating a class with the name of the keyframe defined

.add_keyframe{
  animation: shrink 5s
}

and then add this using jquery

$('#whatever').addClass('add_keyframe');

Once the class is added your keyframe should run.

Answer 2

The SyntaxError is being caused by your semicolon-delimited javascript objects here:

'0%':   {top:$("#test").innerHeight()*-1; left:0px},
'50%':  {top:100%;  left:0px},
'100%': {top:$("#test").innerHeight()*-1; left:0px}

Replace your semicolons with commas inside the objects:

'0%':   {top:$("#test").innerHeight()*-1, left:0},
'50%':  {top:"100%",  left:0},
'100%': {top:$("#test").innerHeight()*-1, left:0}

That will fix the syntax error.

EDIT: In addition, your values for left need to be changed from 0px to 0 or "0px", as 0px by itself is not valid syntax.

EDIT 2: I played around a bit with this http://jsfiddle.net/7P9yY/2/ and got it to work close to what I believe you're asking.

The keyframe is defined as:

$.keyframe.define([{
    name: 'myfirst',
    '0%':   {top:"0px"},
    '50%': {top:$("#testcontainer").innerHeight() + "px"},
    '100%': {top:"0px"}
}]);

This keyframe defines a motion starting at the top of the page (you can change this to be the top of the div if you need), down to the bottom, and back up to the top. Fire the animation with:

$("#test").playKeyframe({
    name: 'myfirst',
    duration: 2000
});

HTML (example):

<div id="testcontainer">
    <div id="test">hello</div>
</div>

CSS (example):

#test {
    position: absolute;
}

#testcontainer {
    position: relative;
    background: pink;
    width: 300px;
    height: 300px;
}

Hopefully that helps a little bit.