Question

当要用新信息更新文本时，我想闪烁一些文本。为此，我需要一个过渡。因为我要使用jQuery .animate方法的所有信息将在60秒钟内全部更新。

由于某种原因，更改文本颜色将无效。保证金和其他东西工作正常。有没有办法改变文字颜色的线性？

.andExpect(forwardedUrl("error-page"));

$('html').click(function() {
  $('div').animate({ color: 'red', 'margin': '200px' }, 700);
});

body {
  background: grey;
  color: #fff;
}

Answer 1

您可以通过在click事件之后添加动画类来实现。请检查以下解决方案：

$('html').click(function() {
  $('div').addClass('animated');
});

body {
  background: grey;
  color: #fff;
}

.animated {
 margin:200px;
 color:red;
 transition:all .7s;
}

和小提琴 https://jsfiddle.net/1wfnyuez/

Answer 2

我建议添加一个类以应用样式，然后在超时后-删除该类以返回默认样式。下面添加了一个类来转换测试div，并在2秒钟后删除该类。

请注意，OP和其他答案都通过更改js的样式遵循相同的模式-这是一种方法，但是我总是建议将样式留给CSS并使用js添加/删除样式的类。

$('.test').click(function() {
  $(this).addClass('active');
  
  setTimeout(function(){
   $('.test').removeClass('active');
  }, 2000)

});

body {
  background: grey;
}

.test {
  color: #fff;
  margin: 0;
  transition: all 0.7s ease-in-out
}



.test.active {
  color: red;
  margin: 200px;
  transition: all 0.7s ease-in-out
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="test">My Text</div>

Answer 3

为此使用jQuery-color。或切换到类名转换

$('html').click(function() {
  $('div').animate({ color: 'red', 'margin': '200px' }, 700);
});

body {
  background: grey;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"
  integrity="sha256-Wp3wC/dKYQ/dCOUD7VUXXp4neLI5t0uUEF1pg0dFnAE="
  crossorigin="anonymous"></script>


<div class="test">My Text</div>

Answer 4

您可以添加其他CSS来更改颜色。只是一种解决方法

$(document).ready(function(){
  $('html').click(function() {
  $('div').animate({  'margin': '200px'}, 700).css('color','red');
});
});

Answer 5

jQuery中animate方法的实现原理是使用计时器根据步长逐渐更改属性值。因此，仅支持数字属性更改，并且颜色没有小数点的增减，因此无法实现。

Answer 6

您可以使用$('html').click(function() { $('div').animate({ 'margin': '200px' }, 700, function () { $('div').css('color', 'red'); }); });回调函数来更改颜色：

body {
  background: grey;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="test">My Text</div>

print(np.cbrt(a))

如何使用.animate更改文本颜色

6 个答案: