我可以用jQuery淡入顏色嗎？

我的JavaScript與這樣的功能改變一些HTML：我可以用jQuery淡入顏色嗎？

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淡入顏色？例如，在一秒鐘內出現新顏色。

來源

2011-06-12 Alexandre

，而你可以去使文字'fadeIn'和'fadeOut' – 2011-06-12 06:47:06

使用animate：

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

來源

2011-06-12 06:45:58

'$（ '＃DIV'）動畫（{ '背景色'： '＃FF00FF'}，1000）;'需要速度 – Sparkup 2011-06-12 06:48:34

是的，但它並不重要。 – 2011-06-12 06:51:01

一秒鐘，用這個：'$（'＃div'）。animate（{'background-color'：'＃ff00ff'}，1000）;' – ngen 2011-06-12 06:53:33

如果要動畫在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

來源

2011-06-12 06:47:48 kinakuta

該頁面上的所有鏈接（項目主頁等）都會產生404錯誤。下載鏈接仍然有效，有一個從2007年的版本。 – 2011-06-12 07:00:03

呃，你是對的 - 我應該知道比使用我的書籤的鏈接更好。我將不得不找到那件事並編輯鏈接。 – kinakuta 2011-06-12 07:05:14

即使四年後，一些jQuery版本[它仍然可以工作]（http://jsbin.com/otuva4），至少對於「顏色」和邊框顏色，如果你單獨指定它們（「borderLeftColor」等）。背景顏色似乎沒有工作。 – 2011-06-12 07:09:49

如果添加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>

來源

2011-09-26 13:45:33 Blazemonger

謝謝，這正是我需要的！ – gtr1971 2013-02-01 19:25:27

我可以用jQuery淡入顏色嗎？

回答

相關問題