Использование JQuery для установки ключевого кадра CSS

Я пытаюсь определить высоту div, которая является динамической, в зависимости от размера текста. Я пытался установить это динамически в CSS как свой первоначальный вопрос https://stackoverflow.com/info/24150538/defining-a-height-in-css-for-animation-keyframe-within-itself?noredirect=1#comment37269329_24150538.

Теперь мне кажется, что есть JQuery, который может позволить вам сделать это в https://github.com/jQueryKeyframes/jQuery.Keyframes. Поэтому я выполнил их пример и удалил keyframe в моем CSS файле и включил его в script, как в следующем фрагменте кода:

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

Мой CSS:

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

position: relative;
}

Я хотел бы знать, почему это не работает.

Ответы

Ответ 1

Синтаксический эффект вызван вашими 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}

Это устранит синтаксическую ошибку.

EDIT: Кроме того, ваши значения для left должны быть изменены с 0px на 0 или "0px", так как 0px сам по себе не является допустимым синтаксисом.

EDIT 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;
}

Надеюсь, это поможет немного.

Ответ 2

Мне удалось активировать ключевой кадр, создав класс с именем определяемого ключевого кадра

.add_keyframe{
  animation: shrink 5s
}

а затем добавьте это с помощью jquery

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

После добавления класса ваш ключевой кадр должен работать.