10

スライドアニメーション（この場合はslideToggleを使用）を使用すると、ヘッダーdivとフッターdivのスライドに違いがあることに気付きました。

フッターをスライドすると、コンテンツ（この場合はh1）が背景に沿ってうまくスライドします。これは、ヘッダーdivには当てはまりません。フッターと同じようにヘッダーをスライドさせたいのですが、背景だけが動いているようです。

jsFiddleで作成したデモをご覧ください。ありがとうございました。

4

6 に答える 6

5

.slideToggle()どちらが便利かを使用するのではなく、ヘッダー要素のtopプロパティをアニメーション化して、高さを変更するのではなく、画面から滑り落ちるようにすることができます。

たとえば、次を使用してヘッダーの状態を保存し、ヘッダーを.data()アニメーション化でき.animate()ます。

//set the initial state and bind click event handler
$('#toggleHeader').data('state', 0).bind('click',function(){

    //if the header is showing
    if ($(this).data('state') === 0) {

        //set state to not showing
        $(this).data('state', 1);

        //animate header element out-of-view
        $('#header').stop(true).animate({ top : -102 });
    } else {

        //set state to showing
        $(this).data('state', 0);

        //animate header element into view
        $('#header').stop(true).animate({ top : 0 });
    }
});

ここにデモがあります：http://jsfiddle.net/xhFz7/3/

于 2012-10-09T15:55:01.997 に答える
3

Jasper の修正は機能しますが、ThatSteveGuy の説明も正しいです。ThatSteveGuy の推論を使用して問題を解決し、古いコードをすべて保持するには、これを CSS に追加します。

#header h1 {
  position:absolute;
  text-align:center;
  width:100%;
  margin:0px;
  bottom:40px;
}

ここに見られるようにhttp://jsfiddle.net/xhFz7/58/

于 2012-10-09T17:23:18.877 に答える
2

トグル イベントは、基本的に特殊なクリック イベントです。ここでドキュメントを読むことができます: http://docs.jquery.com/Events/toggle

したがって、次のようなトグル アニメーションを作成できます。

$('#toggleHeader').toggle(function() {
    $('#header').animate({top: "-102px"});
    }, function() {
        $('#header').animate({top: "0px"});
    }
);

ここで私のフィドルを見ることができます: http://jsfiddle.net/xhFz7/43/

于 2012-10-16T05:03:20.910 に答える
1

解決策は、height (デフォルトの slideToggle の動作) ではなく、marginTop または top (相対位置または絶対位置) をアニメーション化することです。

$(document).ready(function(){
    $('#toggleHeader').bind('click',function(){
        $('#header').marginTopToggle();
    });       

    $('#toggleFooter').bind('click',function(){
        $('#footer').slideToggle();
    });        
});

$.fn.marginTopToggle = function(time) {
    time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;        
    if(parseInt($(this).css("margin-top")) == 0) {
        $(this).animate({"margin-top": "-" + $(this).outerHeight() + "px"}, time );
    } else {
        $(this).animate({"margin-top": 0}, time );
    }
}

高さに依存せず、標準の jQuery 速度で動作します。

http://jsfiddle.net/xhFz7/13/

ヘッダーの下部に対してテキストを配置することもできます。これも機能します。

http://jsfiddle.net/xhFz7/14/

于 2012-10-10T11:25:56.063 に答える
1

これを試して。

$(document).ready(function() {
    $('#toggleHeader').bind('click', function() {
        var header = $('#header'), //cached for repeated use
            height = header.outerHeight(),
            anims = {
                slideUp: function() {
                    header.stop().animate({'top': -(height) + 'px'}, 500, function() {
                        header.hide();
                    });
                },
                slideDown: function() {
                    header.stop().show().animate({'top': '0px'}, 500);
                }
            };
        (header.is(':visible')) ? anims.slideUp() : anims.slideDown();
    });

    $('#toggleFooter').bind('click', function() {
        $('#footer').slideToggle();
    });
});​

http://jsfiddle.net/HXD2G/1/

于 2012-10-11T12:20:26.727 に答える
1

slideToggleは高さをアニメーション化し、オーバーフローをhiddenに設定します。要素の子 (h1) は、標準的な動作として、親の上部に配置されます。親が縮小すると、それらは topにとどまり、ヘッダーとフッターに異なる効果をもたらします。

ヘッダーのコンテンツの周りに高さが固定された追加のブロックをラップし、ヘッダーの下部から配置することで、このボックスの高さが縮小したときにコンテンツが上に移動します。

http://jsfiddle.net/willemvb/2CSPR/

于 2012-10-15T12:13:01.823 に答える