2

申し訳ありませんが、タイトルの説明が適切ではないことは承知していますが、効果を説明するのは難しく、観察する必要があります。以下の jsFiddle を参照してください。

http://jsfiddle.net/eus5R/

    $(document).ready(function(){
        var speed = 2500;
        $("div#leftPane p").hide();

        $("div#leftPane").click(function() {
            $("div#leftPane p").each(function() {
                if ($(this).is(":hidden")) {
                    $(this).show(speed);
                    exit();
                }
            });                           
        });
    });

基本的に、非表示になっている一連の p があり、マウスをクリックして一度に 1 つずつ表示したいと考えています。表示に 0.5 秒かかり、テキストがフェードインするようにします。問題は、フェードインの遷移中に、ブラウザーがテキストを適切にレンダリングしようとするときに、テキストがジャグリングすることです。その「ジャグリング」を回避し、最終的に表示されるようにフェードインを既にレンダリングするにはどうすればよいですか?

ありがとう！

4

2 に答える 2

3

持続時間とともに使用showすると、幅もアニメーション化されます。幅が小さいと、テキストが折り返されます。代わりに使用できますslideDown：

http://jsfiddle.net/eus5R/3/

于 2013-09-27T01:18:10.497 に答える
1

andの代わりにshowand をhide使用fadeOutしfadeInます。

$(document).ready(function(){
            var speed = 2500;
            $("div#leftPane p").fadeOut(0);

            $("div#leftPane").click(function() {
                $("div#leftPane p").each(function() {
                    if ($(this).is(":hidden")) {
                        $(this).fadeIn(speed);
                        return false;
                    }
                });                           
            });
        });

http://jsfiddle.net/eus5R/2/

ああ、例外をスローするためにexit()を壊す存在しないのではなく、eachreturn false

于 2013-09-27T01:18:43.830 に答える