jQuery

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

this blinks with Chrome but not with ff and ie (opera not tested)

尝试使用 .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 时间参数

jQuery - dynamically change webkit-animate time parameter

webkit

keyframe