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不能根据其文档为非数字值设置动画。您可以尝试.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不是一个动画属性。让下划线动起来是没有意义的。或者你可以提前给它加下划线，这样下划线也会渐渐淡入。

Answer 2

http://jsfiddle.net/F9xkS/6/

a {
    color: black;
    text-decoration: none;
    transition: text-shadow .3s;
    transition: text-decoration: .3s;
}
.glow {
    text-shadow:0px 0px 10px red;
    text-decoration: underline;
}
$('#1, #2, #3, #4').hide();
$('#1').fadeIn(1000, function () {
    $('#2').fadeIn(500, function () {
        $('#3').fadeIn(1000, function () {
            $('#4').fadeIn(1000, function () {
                $('#4').addClass('glow');
            });
        });
    });
});

Answer 3

尝试使用CSS过渡。例如:

#4
{
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    transition: all 200ms;
}

Answer 4

在淡出之前设置样式，参见JS fiddle

#4 {
    text-shadow: 0px 0px 10px red;
    text-decoration: underline;
}