0

アニメーションの後、次のリストの幅を新しくアニメーション化されたdivとまったく同じになるように設定し、これをその下に移動します。

奇妙なことに、サイズを変更すると、小さな幅にしかサイズ変更されず、もう一度クリックすると、ミリ秒の間必要なサイズになります。これは不明かもしれません。

$('#LoginButton').click(function(){
  $('.username').stop(true,false).animate({width:'toggle'});
  $("#profilesettings").delay(220).toggle(300);
  $("#profilesettings").width( $("#LoginButton").outerWidth(true) );
});

ここにフィドルがあります

それで、画像全体の幅+名前バーのように見えるリストが欲しいのですが、それを正確にその下に移動したいと思います。

ありがとう！

4

1 に答える 1

1

匿名のコールバック関数を animate 呼び出しとともに使用して、クリックした要素の展開が完了するとメニューが表示されるようにすることができます。そうすれば、正確な幅が得られます。を設定することで、下に表示させることができますclear:both;。

結果のコードは次のようになります...

$('#LoginButton').click(function(){
    //$('.username').stop(true,false).animate({width:'toggle'});
    $('.username').animate({
            width : 'toggle'
    }, 1000, 'swing',function(){
        var newWidth = ($('.username').width());
        $("#profilesettings").width(newWidth).css({
            clear:'both',
            'margin-top':0
        });        
        $("#profilesettings").toggle(300);
    });//end anonymous funciton            
});//end click funciton

1 秒の遅延を指定し、「swing」イージングも追加しました。これらはオプションであり、必要に応じて元のアニメーション コードを使用できます。

ここにあなたの更新されたフィドルがありますhttp://jsfiddle.net/CTms3/7/

別の方法として、親コンテナーをアニメーション化して、ボタンとリストの両方が同時に展開されるようにすることもできます。

この情報が役立つことを願っています。

于 2013-04-05T05:27:25.193 に答える