使用JQuery设置CSS关键帧 [英] Using JQuery to set CSS Keyframe
问题描述
我试图确定 div 的高度，它是动态的，取决于文本的大小。我试图在CSS中动态设置为我的原始问题在CSS中为本身的动画关键帧定义一个高度。
我现在似乎有一个JQuery可以让你这样做 https://github.com/jQueryKeyframes/jQuery.Keyframes 。所以我按照他们的例子，删除了 CSS 文件中的关键帧，并将其包含在脚本中以下代码段：
< 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}
}]）;
$（选择器）.playKeyframe（{
名称：'myfirst'，//要绑定到所选元素的关键帧的名称
duration：90，// [可选，默认值：0，以毫秒为单位]你想要的持续时间（以毫秒为单位）
timingFunction：'linear'，// [可选，默认：ease]指定动画的速度曲线
delay ：0，// [可选，默认值：0，以毫秒为单位]动画开始之前要等待的时间（以毫秒为单位），默认值为0
repeat：'infinite'，// [可选，默认值：1 ]你想要动画重复的次数，默认值为1
direction：'alternate'，// [可选，默认值：'normal']你想要的帧的流向，默认值是正常
fillMode：'running'，// [optional，default：'forward']如何在动画时间之外应用样式，默认值为forward
complete：function（）{} // [动画完成后触发的函数。如果repeat是无限的，则每次重新启动动画时都会触发该函数。
}）;
< / script>
< / body>
我的CSS：
#test {
height：auto;
width：100％;
position：relative;
}
我想知道为什么这不工作。
SyntaxError是由以分号分隔的JavaScript对象引起的：
'0％'：{top：$（＃test）。innerHeight（）* - 1; left：0px}，
'50％'：{top：100％; left：0px}，
'100％'：{top：$（＃test）。innerHeight（）* - 1; left：0px}
在对象中用逗号替换分号：
'0％'：{top：$（＃test）。innerHeight（）* - 1，left：0}，
'50 ％'：{top：100％，left：0}，
'100％'：{top：$（＃test）。innerHeight（）* - 1，left：0}
这将修复语法错误。
此外， left 的值需要从 0px 更改为 0 或0px，因为 0px 本身不是有效的语法。
编辑2：我在这个 http://jsfiddle.net/7P9yY/2/
关键帧定义为：
$。keyframe.define（[{
name：'myfirst'，
'0％'：{top：0px}，
'50％'：{top：$（＃testcontainer）。innerHeight（）+px}，
'100％'：{top：0px}
} ）;
此关键帧定义从页面顶部开始的运动（您可以将其更改为顶部的div，如果你需要），到底部，并回到顶部。使用以下内容触发动画：
$（＃test）。playKeyframe（{
name：'myfirst'，
duration：2000
}）;
HTML（示例）：
< div id =testcontainer>
< div id =test> hello< / div>
< / div>
CSS（示例）：
#test {
position：absolute;
}
#testcontainer {
position：relative;
background：pink;
width：300px;
height：300px;
}
希望有一点帮助。
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 Defining a height in CSS for animation keyframe within itself.
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.
解决方案 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.
这篇关于使用JQuery设置CSS关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
