jquery - 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;
}