2

基本的に2つのセクション（ヘッダー領域とコンテンツ領域）を持つWebページがあります。ヘッダーは固定されています。つまり position:fixed、常に一番上にあります。ヘッダーセクションにはいくつかの要素があり、その上でスライド機能を使用したいと思います。

padding-topコンテンツエリアに合わせて設定しました。ただし、ヘッダー要素のスライドが実行されるときに変更する必要があります。簡単な.CSS方法で動作します。

サンプルコード： http： //jsfiddle.net/kK7nJ/

同時にアニメーションを作成したいのですが、つまり、メニューが表示されているときに、コンテンツを同時に押し下げる必要があります。今、それは次々と起こっています。

助けてください。

4

2 に答える 2

4

あなたが抱えている問題は、あなたの .slideToggle 呼び出しが期間を設定するバージョンを利用してから、完了時にアニメーション化する関数呼び出しを利用しているという事実に起因しています。

.slideToggle( [期間] [, 完了] )

  • duration (デフォルト: 400)
    タイプ: Number または String アニメーションの実行時間を決定する文字列または数値。
  • complete
    タイプ: Function()
    アニメーションが完了したら呼び出す関数。

あなたの無名関数は正しいアイデアを持っていますが、(お気づきのように) アニメーションが終了した後にのみ呼び出されます。

ドキュメントをさらに下にスクロールすると、次の呼び出し形式が見つかります。

.slideToggle(オプション)

したがって、以前のように 2 つのパラメーターだけではなく、この方法で .slideToggle メソッドにオブジェクトを渡すことで、柔軟性が向上します。

あなたが注意すべきことはこれです：

  • step
    タイプ: Function( Number now, PlainObject fx )
    アニメーションの各ステップの後に呼び出される関数。

    • したがって、既にリンクしたものに従うようにオプション オブジェクトを構築する基本的な方法は、単純に期間とステップをその中に入れて、ステップが各アニメーション フレームのコンテンツ要素のパディングを変更するための呼び出しを行うことです (これは基本的にすべてがどのように行われるかです)。まず jquery によってアニメーション化され、これは適切で整頓されたソリューションになります):

    {
  duration: 'slow', step: function(){
    $(".content").css({'padding-top':$(".header").outerHeight()});
  }
}

    this を実装するjsfiddleを次に示します。これは、コンテンツ フレームが下にスクロールされている場合でも、少なくともクロムでは問題なく動作するようです。

    于 2013-01-08T02:38:45.417 に答える
    0

    パディングを操作するのではなく、ページの上部に非表示のdivを配置して、ヘッダーの反対側に切り替えてみませんか？異なる遷移タイプが問題の根本であると思われます。

    これを示す例を次に示します。

    <div class="header">
   <ul class="menu"><li>One</li><li>Two</li><li>Three</li><li>Four</li></ul>
   <a href="javascript:void(0)" id="pull">pull</a>
 </div>

<div class="menu-pad"></div>

$("#pull").on("click",function(){
  $(".menu, .menu-pad").slideToggle('slow');
});

    http://jsfiddle.net/MV5kB/1/

    于 2013-01-08T00:46:11.173 に答える