jQuery-动态更改Webkit动画时间参数

jquery webkit keyframe

109 观看

1回复

444 作者的声誉

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

我是这样制作的:

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

但是什么也没发生。

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

谢谢!

作者: Joe 的来源 发布者: 2016 年 1 月 9 日

回应 1


1

1 作者的声誉

决定

这会与Chrome一起闪烁,但不会与ff和IE一起闪烁(未测试操作)

尝试使用.text()String.prototype.replace()RegExp /\d+(?=s)/g匹配数字后"s",更新animation-durationthis.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/

作者: guest271314 发布者: 2016 年 1 月 9 日
32x32