jquery - jQuery淡入文本首先换行，然后在过渡期间挤压

Question

对不起，我知道这不是一个很好的标题描述，但效果很难描述，需要观察。请参阅下面的 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，我想通过鼠标单击一次显示一个。我希望显示需要半秒钟，淡入文本。问题是在淡入过渡期间，文本会随着浏览器尝试正确呈现它而四处游荡。我怎样才能避免这种“杂耍”并让它淡入已经呈现出来，因为它最终会被显示出来？

谢谢！

Answer 1

使用show持续时间也会为宽度设置动画。较小的宽度会导致文本换行。您可以slideDown改用：

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

Answer 2

代替showandhide使用fadeOutand 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/

哦，而不是 non-existantexit()破坏了，each因为它抛出了一个异常，做一个return false