2

作業中の Web サイトで slideDown() 効果を使用しようとしていますが、必要な効果が得られません。ここに私が達成したいことを示すサンプルがあります。

<div>
    blahblahblahblah

    <span id="span_more" style="display:none">
        blahblahblah
    </span> 

    <a class="link_more" id="more">More&hellip;</a></div>
</div>

基本的に、「More...」をクリックすると、現在非表示になっているテキストがスライド効果を使用して表示され、表示されているテキストの最後にインラインのまま表示されます。これは、表示をブロックに変更しているため、slideDown() では可能ではないようです。

どうもありがとうございました。

4

3 に答える 3

6

残念ながら、これは本質的に不可能です。jQuery のアニメーションは、高さと幅を持つ要素に依存しています。インライン要素にはこれらの寸法が設定されていないか設定可能ではないため、アニメーション (または を使用するかどうかにかかわらずanimate)slideUpはそれらをブロックレベルの要素にする必要があります。

fadeIn動作し、便利な代替手段になる可能性があります。

于 2010-10-07T22:46:36.913 に答える
1

左にフロートするスパンまたは div に常に表示されるテキストをラップし、「追加の」テキストも左にフロートさせ、リンクを作成する必要がありますclear: both;が、この構造により単純な .slideDown() が機能します。

<div>
    <span style="float: left;">blahblahblahblah</span>

    <span id="span_more" style="display: none; float: left;">
        blahblahblah
    </span>

<div style="clear: both;"><a class="link_more" id="more">More&hellip;</a></div>
</div>

これが実際に動作していることを示すデモがあります: http://jsfiddle.net/7yqMr/

于 2010-10-07T22:50:25.503 に答える
0

私は以前にその問題を抱えていました。当時、jQuery の動作を変更することは不可能に思えたので、インライン ブロックで同じことを行うルーチンを作成しているときに問題に遭遇しました。display: blockそこで、要素を1 行にまとめて使用するように切り替えましたfloat: left。

<div>
    <div style="display: block; float: left;">blahblahblahblah</div>

    <div id="span_more" style="display: none; float: left;">
        blahblahblah
    </div> 

    <a style="display: block; float: left;" class="link_more" id="more">More&hellip;</a></div>
</div>
于 2010-10-07T22:46:57.063 に答える