Question

我需要自定义文本的闪烁速度

我这样做了：

<style>
    .blink {
        -webkit-animation: blink 0s step-end infinite;
                animation: blink 0s step-end infinite;
     }
     @-webkit-keyframes blink { 50% { visibility: hidden; }}
     @keyframes blink { 50% { visibility: hidden; }}
</style>

<body>
    <div id="test" class="blink">Test</div>
    <input id="blinkspeed" type="number" value="0"> 
</body>


<script>
    $('#blinkspeed').click(function(){
        $("#test")[0].style.webkitAnimation = "blink "+$(this).val()+"s step-end infinite";
    });     
</script>

jsfiddle此处

这与Chrome一起闪烁，但没有ff和ie（歌曲未经测试）

我认为动画不是标准，我必须为每个浏览器写一行吗？

我添加了这个

$("#test")[0].style.Animation = "blink "+blinkspeed+"s step-end infinite";

但没有发生任何事情。

有人可以给我一些提示吗？

谢谢！

Answer 1

这与Chrome一起闪烁，但没有ff和ie（未经过测试的歌剧）

尝试使用.text()，String.prototype.replace()与RegExp /\d+(?=s)/g匹配数字后跟"s"，将animation-duration更新为this.value #blinkspeed

$("#blinkspeed").click(function() {
  var blinkspeed = this.value;
  $("style").text(function(_, style) {
    return style.replace(/\d+(?=s)/g, blinkspeed)
  })
});

.blink {
  -webkit-animation: blink 0s step-end infinite;
  -moz-animation: blink 0s step-end infinite;
  -ms-animation:  blink 0s step-end infinite;
  animation: blink 0s step-end infinite;
}

@-webkit-keyframes blink {
  50% {
    visibility: hidden;
  }
}

@-moz-keyframes blink {
  50% {
    visibility: hidden;
  }
}

@-ms-keyframes blink {
  50% {
    visibility: hidden;
  }
}

@keyframes blink {
  50% {
    visibility: hidden;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <div id="test" class="blink">Test</div>
  <input id="blinkspeed" type="number" value="0">
</body>

jsfiddle https://jsfiddle.net/bbc94sp9/6/

jQuery - 动态更改webkit-animate时间参数

1 个答案: