淡入淡出與CSS？

Question

<textarea id="text" rows="5" cols="25"></textarea> <span id="fade">fade</span>

$("#fade").click(function () {  
    $("#text").fadeIn(31000, function () {   
        $("#text").css('background-color', 'red');         
    });      
    return false;    
}); 

http://jsfiddle.net/tG7xE/

為什么在此示例中，fadeIn無法正常工作？ 我該怎么做？

Answer 1

http://jsfiddle.net/tG7xE/5/

<textarea style="display:none;" id="text" rows="5" cols="25"></textarea> <span id="fade">fade</span>

$("#fade").click(function () {  
    $("#text").fadeIn(function () {   
        $("#text").css('background-color', 'red');         
    });      
    return false;    
}); ​

只有當元素不可見才能使用fadeOut()或hide()將其隱藏時， fadeIn起作用。

Answer 2

我確實認為您希望fadeIn與實際工作fadeIn不同。 它不用於淡化背景顏色，而用於淡化隱藏的元素。 如果將textarea的display為none （例如： http : //jsfiddle.net/tG7xE/4/ ），您將明白我的意思。 在fadeIn完成后，將執行指定的回調（bg變為紅色）。

如果您想設置背景顏色的動畫，我認為您應該看看jQuery UI可以設置顏色值的動畫： http : //jqueryui.com/demos/animate/

Answer 3

您需要包括jQuery-UI，然后執行如下代碼：

$("#fade").click(function() {
  $('#text').animate({backgroundColor: '#ff0000'}, 'slow');
});​

這是您的小提琴的更新版本。

希望這可以幫助