4

I'd like to randomize the duration of a given animation every page refresh. I've been trying it with jquery, but it doesn't seem to be working: I have that doesn't seem to be working.

Relevant css:

#background1 {
    -webkit-animation: background1 10s;
}

Animation background1 is defined elsewhere; I'm not trying to change the keyframe animation part.

Jquery:

 var bg1 = $('#background1');
 var number = Math.floor(Math.random() * 10) + 5;
 bg1.css('-webkit-animation', 'background1 ' + number + 's');

Nothing seems to happen. Help out a jquery noob?

4

3 回答 3

2

当浏览器注册您的 CSS 声明时，它会注册动画的名称background1和持续时间，10s然后立即启动动画。如果你想用新的持续时间重新开始动画，你必须等到动画结束，或者你必须用新的持续时间附加一个不同的动画名称。

你可以在这个小提琴上测试：http: //jsfiddle.net/mfdj/Phnf5/9/

  1. 更改名称时始终可以立即触发动画
  2. 只有在为持续时间设置不同的值并且在当前动画完成后才可以通过仅更改持续时间来重新启动相同的动画

由于您的初始动画长度为 10 秒，并且您想立即触发具有随机时间的持续时间，您应该简单地删除此声明：

#background1 {
    -webkit-animation: background1 10s;
}

你应该得到你想要的结果。

请注意，浏览器处理重新附加/重新触发具有相同名称但持续时间不同的 css 动画的方式存在一些怪癖。例如，在示例中， Chrome 以不同的方式处理摇晃和闪光动画。尝试开始一个 10 秒的动画，然后用一个 1 秒的同名动画打断。摇动将在 10 秒内完成，而闪光灯则简单地清除动画。但是，如果您从闪光灯切换到摇动（反之亦然），动画总是会重新开始。这些是你必须知道的用 css 触发动画的怪癖。

于 2013-08-03T02:54:40.947 回答
1

其他答案说的是错误的！....那个 css 很好，它做了我上面的答案，但是被jquery 覆盖了。事实上，你的 jquery 也几乎没问题。

您只是在css中获取了动画功能错误。

您永远不会定义要运行的动画。您正在使用 jquery 成功地将动画附加到元素。但是什么动画。

看看我的例子：http: //jsfiddle.net/techsin/Lju95/1/

要了解更多信息，请访问此处：http ://css-tricks.com/snippets/css/keyframe-animation-syntax/

在bg1.css('-webkit-animation', 'background1 ' + number + 's'); background1中应该引用动画名称而不是您已经通过bg1引用的元素名称，不是吗？

动画名称和动画本身可以在css中定义，然后用新的随机值调用。

要轻松学习 jquery，请访问此处：https ://tutsplus.com/course/30-days-to-learn-jquery/

学习 Html/Css3：去 w3schools.com 然后http://learncss.tutsplus.com/

于 2013-08-03T03:15:30.157 回答
0

正如所Fox指出的 - 删除该声明。然后，使用您的 JS，您可以执行以下操作：

var bg1 = $('#background1');
var number = Math.floor(Math.random() * 10) + 5;
bg1.css('-webkit-animation', 'background1 ' + number + 's');

你也可以把它放在一个班级里让事情变得更干净（有点）

#background1 .animated {
    -webkit-animation-name: background1;
}

// jQ
$('#background1').addClass('animated').css(
    '-webkit-animation-duration',
    (Math.floor(Math.random() * 10) + 5) + 's'
);
于 2013-08-03T03:07:01.013 回答