jQuery fadeIn.css()?

Question

How can I make the .css() propertys fadeIn? page: http://arnoldsktm.zxq.net/

        $(document).ready(function(){
        $('#1, #2, #3, #4').hide();
        $('#1').fadeIn(1000, function(){
            $('#2').fadeIn(500, function(){
                $('#3').fadeIn(1000, function(){
                    $('#4').fadeIn(1000, function(){
                        $('#4').css({
                            'text-shadow':'0px 0px 10px red',
                            'text-decoration':'underline'
                        });
                    });
                });
            });
        });
    });

This $('#4').css({});

http://jsfiddle.net/F9xkS/2

Answer 1

jQuery cannot animate non-numeric values per its documentation. You could try .animate instead of .css, but I suspect it won't work with these.

Instead you're better off relying on CSS3 transitions and just adding a class:

#4 {
    -webkit-transition: text-shadow 1s;
    transition: text-shadow 1s;
}
#4.shown {
    text-shadow: 0px 0px 10px red;
    text-decoration: underline;
}

$("#4").fadeIn(... function () { $(this).addClass('shown');

Note that text-decoration is not an animatable property. It wouldn't make sense to animate the underline. Instead maybe you can underline it ahead of time so the underline is also faded in.