41
rated 0 times
[
43]
[
2]
/ answers: 1 / hits: 45947
/ 10 Years ago, wed, june 11, 2014, 12:00:00
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.
More From » jquery
