Question

我有一个简单的HTML页面，页面中央有一个div，下面有两个按钮。我想要的动画是在给定的持续时间内以线性方式从黑色到白色的div的bg。这个持续时间会根据我按下底部的按钮而改变。简单地使用JS更改动画持续时间/ animationDuration不起作用，就我在网上看到的而言，这是一个已知问题。我也对使用jQuery的解决方案持开放态度。

我的代码：

$(".b1").click(function(){
			$("#movie").removeClass("t1");
      $("#movie").removeClass("t2");
      $("#movie").addClass("t1");
})

$(".b2").click(function(){
			$("#movie").removeClass("t1");
      $("#movie").removeClass("t2");
      $("#movie").addClass("t2");
})

body {
  background: black;
  margin: 0 auto;
  max-width: 300px;
  height: auto;
}

#movie {
  width: 300px;
  height: 200px;
  background: red;
}

.t1 {
  -webkit-animation: change 1s infinite;
  animation: change 1s infinite;
}

.t2 {
  -webkit-animation: change 10s infinite;
  animation: change 10s infinite;
}

button {
  margin-top: 15px;
}

@keyframes change {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

@-webkit-keyframes change {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
<body>
  <div id="movie"></div>
  <button type="button" class="b1">Test 1</button>
  <button type="button" class="b2">Test 2</button>
</body>

这是jsfiddle。

Answer 1

＆＃13;

$(".b1").click(function(){
			$("#movie").removeClass("t1");
      $("#movie").removeClass("t2");
      $("#movie").addClass("t1");
})

$(".b2").click(function(){
			$("#movie").removeClass("t1");
      $("#movie").removeClass("t2");
      $("#movie").addClass("t2");
})

＆＃13;

body {
  background: black;
  margin: 0 auto;
  max-width: 300px;
  height: auto;
}

#movie {
  width: 300px;
  height: 200px;
  background: red;
}

.t1 {
  -webkit-animation: change 1s infinite;
  animation: change 1s infinite;
}

.t2 {
  -webkit-animation: change 10s infinite;
  animation: change 10s infinite;
}

button {
  margin-top: 15px;
}

@keyframes change {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

@-webkit-keyframes change {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="movie"></div>
  <button type="button" class="b1">Test 1</button>
  <button type="button" class="b2">Test 2</button>
</body>

＆＃13;

使用JS或jQuery在任何时候更改动画持续时间？

1 个答案: