0

値と自動の間で div の css 幅をスムーズに切り替えようとしています。これは、私が望むほとんどのことを達成するために私が知っている2番目に良いオプションであるため、現在これを持っています。

これを行うことで、画像と名前と同じ幅のクリック メニューを作成したいと考えています。

$('#LoginButton').click(function(){
    $(this).css('width', 'auto'),
    $("#profile").delay(100).toggle(300);
});

私が見つけた他のトグル関数は、「auto」を値として使用すると機能しません。これは奇妙だと思います。

トグル オプションの横にある div とその内容は、クリックするとポップアップするのではなく、「スムーズに」拡大したいと思います。

jsFiddle: http://jsfiddle.net/EverybdyLies/jaxpd/1/

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

4

4 に答える 4

0

少しハックですが、このようなことを試してください。

$('#LoginButton').click(function()
{
    // Show the menu, but offscreen
    var profile = $('#profile')
        .css('position', 'absolute')
        .css('left', '-10000px')
        .css('top', '0')
        .show ();

    // Get the width of the menu
    var width = profile.width ();

    // Hide the menu and put it back into document flow
    profile
        .hide()
        .css('position', 'static')
        .delay(100)
        .toggle(300);

    // Resize the login button
$(this).animate({'width': width}, 500);
});

ここでフィドルを更新しました

于 2013-04-05T01:18:02.127 に答える
0

問題の核心は、$.stop(true,false).animate({width: 'toggle'});もはや誰も話さないことです (非推奨?)。

また、display:inline-block使用可能なすべてのスペースを取りたくないが、要素を のようなプッシュオーバーにしたくない場合にも非常に便利ですdisplay:inline。

どのように実行できるかを示すために少し変更しましたが、テキストを適切に表示するには、まだやらなければならない作業があります。

http://jsfiddle.net/CTms3/2/

autocss3トランジション（アニメーション）は、縮小時に要素が使用するスペースを考慮または縮小しないため、jQuery（およびアニメーション化する他のjsライブラリ）は依然として優れていますtransform: scale（おそらく方法はありますが、それが何であるかはわかりませんは）。

上記の最初のコードを使用して、ほとんどのアニメーションを直接操作することもお勧めします。フィドルでボタンをすばやくクリックすると、クリックする#usernameたびに方向が変わります#profileが、まだ前後に進んでいないことに気付くでしょう。のせいですstop(true,false)。cssが実際に最終状態に設定されている間、アニメーションを中断します。とても便利。

あなたは素晴らしい軌道に乗っています。質問にさらに詳細を追加したい場合、またはテキストを#username適切に表示する方法を知りたい場合は、新しい質問で質問してください。

于 2013-04-05T03:15:52.820 に答える