1

「続きを読む」テキストがクリックされたときに非表示の段落を表示するように jQuery を設定しました。ただし、テキストが表示されている場合、テキストが表示されるように命令した場所にジャンプすることはできません。

設定方法は次のとおりです。「もっと読む」というテキストが含まれるh4があり、クリックすると、fadeIn効果のある段落があり、h4にはfadeOut効果があります。

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);
    });
    });

ご覧いただきありがとうございます。

4

1 に答える 1

2

何が起こっているかというと、アニメーションの最後に到達したとき.fadeOut()の<h4>実際のセットです。display: none以来display: none、もはや DOM にはありません。つまり、段落がジャンプしてその場所に移動します。

From:表示プロパティの代わりに表示プロパティを使用する .fadeOut() メソッド

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