javascript - Using JQuery to set CSS Keyframe

Question

Welcome To Ask or Share your Answers For Others

javascript - Using JQuery to set CSS Keyframe

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:07:19+0000

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.

Categories

javascript - Using JQuery to set CSS Keyframe

javascript - Using JQuery to set CSS Keyframe

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags