Question

我设置了一些jQuery来显示一个隐藏的段落，当＆＃34;阅读更多＆＃34;单击文本。但是，当显示文本时，它不会跳转到命令显示文本的位置。

以下是它的设置方式。我有一个h4，其中的文字说明了＆＃34;阅读更多＆＃34;然后当它被点击时，它有一个带有淡入淡出效果的段落，而h4有一个淡入淡出效果。

如何让段落停止跳跃到h4的位置？我尝试在具有固定位置的div中设置段落，但这导致我的jQuery不起作用，然后我尝试将段落设置为具有固定位置，但这也不起作用。我甚至设置了保证金最高限额，但仍然没有。

这是我的HTML：

    <div id="expanding_letter">
    <h4>Read More</h4>

    <p>text text text stuff to say etc blah bla blah lorme ipsum doler set amet....
    </p>

    </div>

我的CSS

    #expanding_letter {
font-size:1.5em; 
color: #9d9d9d; 
height: 37px; 
line-height: 37px;  
    }

    #expanding_letter h4 {
color: #666; 
cursor: pointer; 
height: 37px; 
line-height: 37px;  
    }

    #expanding_letter p {
color: #666; 
height: 37px; 
line-height: 37px;
margin-top: 100px;
    }

    #expanding_letter .expanded div { 
    }

    #faqs .expanded { 
color:#666;
    }

    #expandedParagraph {
position: fixed;
    }

和jQuery：

    $(function() {
    $("#expanding_letter p").hide();
    $("#expanding_letter h4").click(function () {
    $(this).next("#expanding_letter p").fadeIn(1000);
    $(this).fadeOut(1000);
    });
    });

谢谢你看看！

Answer 1

当.fadeOut() <h4>实际设置display: none到达动画结尾时，会发生什么。自display: none以来，它不再位于DOM中，这意味着该段会跳起来取代它。

来自：The .fadeOut() method to use visibility property insted of display property

$('selector').fadeTo(500, 0, function(){
    $('selector').css("visibility", "hidden");   
}); // duration, opacity, callback

如何显示我的隐藏段落静止不动

1 个答案: