3

.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

4

4 に答える 4

3

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ではないことに注意してください。下線をアニメーション化しても意味がありません。代わりに、事前に下線を引くことができるので、下線もフェード インします。

于 2013-03-16T16:01:01.340 に答える
3

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');
            });
        });
    });
});
于 2013-03-16T16:15:21.057 に答える
1

CSS トランジションを使用してみてください。例えば：

#4
{
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    transition: all 200ms;
}
于 2013-03-16T15:57:55.710 に答える
0

フェードする前にスタイルを設定するだけです。JSフィドルを参照してください

#4 {
    text-shadow: 0px 0px 10px red;
    text-decoration: underline;
}
于 2013-03-16T16:00:15.643 に答える