Question

我正在使用与this one

非常相似的选择器制作累积奖金游戏

我完全不知道从哪里开始。我的第一个想法是使用从服务器端发送的一组随机选择的数字，以避免作弊和使用jquery或css动画。

然后我考虑使用jquery，因为我知道它更好，并且闪烁间隔是一个递归的函数，返回我想要的缓和速度的值。（这些数值与视频非常相似，不超过3-4秒）。

$('.blink').blink(); // default is 500ms blink interval.
$('.blink').blink(100); // causes a 100ms blink interval.

但是现在我不知道从哪里开始，因为这必须是移动友好的。你会做什么？

更新

$( document ).ready(function() {

var time = 0;
var diff = 50;
var minTime = 0;
var maxTime = 7000;


function easeInOutExpo(t, b, c, d) {
    t /= d;
    return c*t*t*t + b;
};


$("#clickme").click(function() {
    for (var i = 0, len = diff; i <= len; i++) {
      (function(s) {
        setTimeout(function() {
            $('#book').html("Page " + s + " turned");
        }, time);
      })(i); //<--------------i have no clue what this does------------
      time = easeInOutExpo(i, minTime, maxTime, diff);
    }
});

});//document ready

我已经得到了基本的机制，但是当你再次点击它而不是50时它会变为0.这不是好行为，因为我将使用这些数字来迭代随机生成的数组。

任何人都可以解释这种行为吗？ I've included a JS fiddle here.谢谢！

Answer 1

您可以使用简单的CSS动画。

@keyframes blink {
  0%   { background-color:red; }
  10% { background-color:purple; }
  20% { background-color:gray; }
  30% { background-color:green; }
  40% { background-color:white; }
  50% { background-color:cyan; }
  65% { background-color:yellow; }
  100% { background-color:black }
}

.Blink{
animation: blink 2s 1 ease-out;
background-color:black;
height:100px;
width:100px;


}

<div class="Blink">

在累积奖金游戏中缓解文本闪烁的速度

1 个答案: