0

私はこれを探していましたが、見つかりませんでした。テーブル tds に 2 つの div があります。

 __________ __________
|         | |         |
|  Div 1  | |  Div 2  |
|         | |         |
|_________| |_________|

コンテンツをフェードアウトさせて最後に破棄しながらdiv1の幅を減らし、次にdiv2に再び表示して、異なるコンテンツをcssできるようにしたいと考えていました。

4

1 に答える 1

1

jQueryのanimate機能を利用できます。

$('#div1').stop().animate({
        width:0,
        opacity:0
    }, 1000, function() {
        $(this).remove();
    });

これはまずstop()、既存のアニメーションを停止するために呼び出します。次に、要素の幅と不透明度を 1000 ミリ秒で 0 にアニメートします。アニメーションが完了remove()した後、最終的に を呼び出します。#div1

直後に再表示したい場合は、呼び出すremove()必要はありません。appendTo()この場合、次を使用します。

...
   }, 1000, function() {
       $(this).appendTo($(this).parent());
       /* Remember that the width and opacity are still 0 here, so you'll need to revert the animation when re-displaying it */
   });

これは、HTML マークアップが次のようなものであることを前提としています。

<div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

これはJSFiddle のデモです。

于 2013-03-04T12:41:20.977 に答える