3

jQueryslideDownとslideUp関数は非常に便利ですが、動作を少し変更する必要があります。

それが何をするか

slideDownaを呼び出すと通常発生するのdivは、divが下にスライドし、さらに下にスライドすると、の下部の内容がdiv表示されることです。

私がする必要があること

divを下にスライドさせたいのですが、の下部の内容を表示するのではなくdiv、上部の内容を表示する必要があります。したがって、一番下のコンテンツが最初に表示され、次に上のコンテンツがスライドして表示されます。これのポイントはdiv、画面の外から画面にスライドしているように見せることです。これが図です：

How it works now:
----------
| Line 1 | |  Reveals from top to bottom; top is anchored in place
| Line 2 | |  As the div expands vertically, Line 1 is shown first and
| Line 3 | |  none of the lines move as they become visible.
********** V
| Line 4 | 
| Line 5 |
----------

How I would like it to work:
----------
| Line 1 |    
| Line 2 |    
| Line 3 |    
********** ^  Reveals from bottom to top; bottom is anchored in place
| Line 4 | |  As the div expands vertically, the Line 5 is shown first and
| Line 5 | |  moves downward as more is revealed.
----------

私はそれを効果的に伝えていない可能性があることを認識しています。さらに詳しい説明が必要な場合はお知らせください。

アップデート：

これが私が扱っているものと同等のHTMLです：

<div id="anchored">
    <table>
        <tr>
            <td>
                <!-- this is the div that is initially invisible and should slide from the bottom -->
                <div id="slider">
                    hello
                </div>
            </td>
        </tr>
        <tr>
            <td>
            <!-- this is always visible and should be pushed down by "slider" as it moves downward -->
            hello 
            </td>
        </tr>
    </table>
</div>

CSS：

#anchored {
    position: fixed;
    top: 0px;
}

#slider {
    display: none;
}

table {
    width: 100%;
}
4

6 に答える 6

2

次のようなものを提案しますが、HTMLを表示していない場合、これは提案にすぎません（ただし、実際のHTMLを投稿すると、役立つものを提供できるようになります。より良い）：

var container = $('#slide'),
    p = container.find('p');

container.height(p.height());
$(p).css({
    'position' : 'absolute',
    'top' : -p.height()
}).animate({
    'top' : 0
},2500);

JSフィドルデモ。

HTML：

<div id="slide">
<p><!-- contents... --></p>
</div>​

CSS：

#slide {
    border: 1px solid #000;
    position: relative;
    overflow: hidden;
}​

参照：

  1. jQuery：

  2. CSS：

于 2012-04-10T16:22:12.857 に答える
0

slideDownとslideUpは役に立ちません。あなたはあなたの方法をハックする必要があります。拡張可能なブロックをダミーの親divでラップし、オーバーフローを非表示に設定します。次に、5時間のアイテムのみが表示されるように、拡張可能なブロックをそのダミーの親の内側に配置します。

divの状態を変更する場合は、最初に親ダミーdivの高さをその子に設定してから、animate（）を使用してdivの最上位属性を0に設定します。

jsFiddleでHTMLマークアップとCSSコードを教えていただければ、それをお手伝いできます。

于 2012-04-10T16:02:36.937 に答える
0

1つの簡単なアイデア（これが有効かどうかはわかりません。後でテストします）：テキストを一定の高さの1つのdivに入れることができるかもしれません。これを、slideDownとUpする別のdivでラップします。position：relative（またはabsolute）およびbottom：0を使用して、一定の高さのdivをラッパーの下部にアタッチします。ラッパーにoverflow：hiddenを使用すると、すべてが機能する可能性があります。

于 2012-04-10T16:04:19.727 に答える
0

jQueryはあなたが望むことをすることができ、これを処理するためのslideDownメソッドのオプションがあると素晴らしいと思います。とにかく、あなたはこのようにそれを行うことができます：

$('div').show("slide", { direction: "up" }, 1000);

jsfiddleで実際に動作することを確認してください（jQuery UIを使用）。JQueryに触発された：上にスライドするのではなく、「プッシュ」スライドを実行する方法は？

于 2012-04-10T16:08:31.630 に答える
0

もちろん、それを実行して.slideDown（）を使用することもできます。.slideDownを使用するアイテムを比較的配置された要素（たとえば、div）でラップし、要素の配置を絶対に設定してから、を設定して親の下部に結び付ける必要があります。 CSSのbottomプロパティをゼロにします。

これがjsFiddleの例です。

HTML：

<div id="container">
    <div id="foo">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    </div>
</div>​

CSS：

#foo{
    border:1px solid #999;
    float:left;
    position:absolute;
    bottom:0;
}
#container {
    position:relative;
    height:200px;
}

jQuery：

$('#foo').hide().slideDown(3000);​
于 2012-04-10T16:10:38.713 に答える
0

最終的には、Armatusとtea_totalerの回答を組み合わせて使用​​できるようになりました。ここで確認できます：http：//jsfiddle.net/Cg4yN/

于 2012-04-10T22:03:37.890 に答える