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;    
});

fadeIn仅在使用fadeOut()或hide()隐藏元素时才有效。

Answer 2

我认为你希望fadeIn的工作方式与实际工作方式不同。它不是用来淡化背景颜色，而是淡化隐藏元素。如果您将textarea的{{1}}设置为display（例如：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');
});

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

希望这有帮助

用css淡化？

3 个答案: