CODEWITHSUNDEEP
javascriptjquerycss
user94628
user94628

Reputation: 3721

Using JQuery to set CSS Keyframe

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 original question https://stackoverflow.com/questions/24150538/defining-a-height-in-css-for-animation-keyframe-within-itself?noredirect=1#comment37269329_24150538.

I have now seem that there is a JQuery that may enable you to do so at https://github.com/jQueryKeyframes/jQuery.Keyframes. So I've followed their example and removed the keyframe in my CSS file and included it in the script as in the below code fragment:

<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/pathToFile/jquery.keyframes.min.js"></script>

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

<script>
var supportedFlag = $.keyframe.isSupported();

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

$(selector).playKeyframe({
name: 'myfirst', // name of the keyframe you want to bind to the selected element
duration: 90, // [optional, default: 0, in ms] how long you want it to last in     milliseconds
timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
delay: 0, //[optional, default: 0, in ms]  how long you want to wait before the animation starts in milliseconds, default value is 0
repeat: 'infinite', //[optional, default:1]  how many times you want the animation to repeat, default value is 1
direction: 'alternate', //[optional, default: 'normal']  which direction you want the frames to flow, default value is normal
fillMode: 'running', //[optional, default: 'forward']  how to apply the styles outside the animation time, default value is forwards
complete: function(){} //[optional]  Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
});


</script>
</body>

My CSS:

#test{
height: auto;
width:  100%;

position: relative;
}

I would like to know why this isn't working.

Upvotes: 14

Views: 48354

Answers (2)

Loubot
Loubot

Reputation: 285

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.

Upvotes: 5

Nile
Nile

Reputation: 1586

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.

Upvotes: 20

Related Questions