Question

抱歉，我知道这不是一个很好的标题描述，但效果很难描述，需要观察。请参阅下面的jsFiddle。

    $(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

而不是show和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()违反的不存在的each，请执行return false

jQuery淡入文本首先包装然后在转换期间进行搜索

2 个答案: