淡入淡出与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/

Why in this example fadeIn doesnt working? How can i make it?

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 works only if element is not visible to hide it use fadeOut() or hide() .

Answer 2

I do think you expect to work fadeIn differently from what it actually does. It's not used to fade in the background color, but to fade in a hidden element. In case you set your textarea 's display to none (like in: http://jsfiddle.net/tG7xE/4/ ) you'll see what I mean. After the fadeIn is complete the specified callback is executed (bg turns red).

In case you want to animate background colors I think you should have a look at jQuery UI's possibilities to animate color values: http://jqueryui.com/demos/animate/

Answer 3

You need to include jQuery-UI and then execute your code like this:

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

Here is an updated version of your fiddle.

Hope this helps