1

我设置了一些 jQuery 以在单击“阅读更多”文本时显示隐藏段落。但是，当显示文本时，它不会跳到命令显示文本的位置。

这是它的设置方式。我有一个 h4 的文字写着“阅读更多”，然后当它被点击时，它有一个带有淡入效果的段落，而 h4 有一个淡出效果。

如何使段落停止跳到 h4 所在的位置？我尝试将段落设置在具有固定位置的 div 中，但这导致我的 jQuery 无法工作，然后我尝试将段落设置为具有固定位置，但这也不起作用。我什至设置了margin-top，但还是不行。

这是我的 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);
    });
    });

谢谢参观！

4

1 回答 1

2

实际发生的情况是，当它到达动画结束时，实际上是.fadeOut()在<h4>集合上。display: none由于display: none，它不再在 DOM 中，这意味着该段落会跳转到它的位置。

来自：.fadeOut() 方法使用可见性属性插入显示属性

$('selector').fadeTo(500, 0, function(){
    $('selector').css("visibility", "hidden");   
}); // duration, opacity, callback
于 2013-11-13T23:58:57.140 回答