jQuery fadeIn.css()？

Question

如何使 .css() 属性淡入？ 页码: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'
                        });
                    });
                });
            });
        });
    });

这个 $('#4').css({});

http://jsfiddle.net/F9xkS/2

Answer 1

jQuery 无法根据 its documentation 为非数字值设置动画.您可以尝试使用 .animate 而不是 .css，但我怀疑它不适用于这些。

相反，您最好依赖 CSS3 转换并只添加一个类:

#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');

注意 text-decoration 是 not an animatable property .为下划线设置动画是没有意义的。相反，也许您可​​以提前给它加下划线，这样下划线也会淡入。