Question

我有javascript用这样的函数更改一些HTML：

if (correct == "true") {
   $('#ft2').html('Correct');
   $('#ft2').css('color', 'Green')
   $('#ft2').css('border-color', 'Green')
} else {
   $('#ft2').html('Incorrect');
  $('#ft2').css('color', 'Red')
  $('#ft2').css('border-color', 'Red')
}

文本在页面上的变化非常快，我希望让用户看起来更好。有没有办法让我可以使用jQuery淡出颜色？例如，在一秒钟内出现新颜色。

Answer 1

如果你想在jquery中为颜色设置动画，你需要一个插件：

http://plugins.jquery.com/project/color

编辑：看起来Resig插件的链接很旧，所以你也可以尝试一些其他编写的插件来做同样的事情：

http://www.bitstorm.org/jquery/color-animation/

这是Resig原始插件的直接链接：

http://plugins.jquery.com/files/jquery.color.js.txt

只需将页面保存为jquery.color.js

即可

Answer 2

如果添加jQuery UI，他们会添加对彩色动画的支持。

阅读http://jqueryui.com/demos/animate/了解详情。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").toggle(function() {
      $(this).animate({ color: "#FF0000" }, 1000);
    },function() {
      $(this).animate({ color: "#00FF00" }, 1000);
    });
  });
  </script>

Answer 3

使用animate：

$('#div').animate({'background-color': '#ff00ff'});

我可以用jQuery淡化颜色吗？

3 个答案: