FadeIn with 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?

possible duplicate of [jQuery fade in background colour](http://stackoverflow.com/questions/2652281/jquery-fade-in-background-colour) — JMax, Mar 01 '12 at 14:09
Because the textarea is already visible. You can only fade it in if it is hidden. — Felix Kling, Mar 01 '12 at 14:12
If you wish to fade in a background colour, then see http://stackoverflow.com/questions/967815/how-do-you-fade-in-out-a-background-color-using-jquery. — devdigital, Mar 01 '12 at 14:14

score 0 · Answer 1 · edited Mar 01 '12 at 14:14

0

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().

edited Mar 01 '12 at 14:14

Lix

47,311
12
103
131

answered Mar 01 '12 at 14:11

mgraph

15,238
4
41
75

score 0 · Answer 2 · answered Mar 01 '12 at 14:12

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/

@Mike Noshys: Read the second part of the answer, it's just that you won't be able to use `fadeIn` for what you are trying to do. — m90, Mar 01 '12 at 14:16

score 0 · Accepted Answer · answered Mar 01 '12 at 14:15

0

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

answered Mar 01 '12 at 14:15

darryn.ten

6,784
3
47
65

thanks, is possible manipulate values from? for example 5 seconds? – Mike Noshys Mar 01 '12 at 14:21

FadeIn with css?

3 Answers3