Question

当我使用幻灯片动画时（在本例中我使用了slideToggle），我注意到滑动标题div和页脚div之间存在差异。

滑动页脚时，内容（在本例中为h1）与背景很好地滑动。标题div不是这种情况。似乎只有背景在移动，而我希望标题以与页脚相同的方式滑动。

请查看我在jsFiddle上制作的演示。谢谢。

Answer 1

您可以为标题元素的.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/

Answer 2

Jasper的修复确实有效，但ThatSteveGuy的解释也是正确的。要使用ThatSteveGuy的推理解决问题并仍保留所有旧代码，请将其添加到CSS：

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

如此处所见http://jsfiddle.net/xhFz7/58/

Answer 3

toggle事件本质上是一个专门的点击事件。您可以在此处阅读文档：http://docs.jquery.com/Events/toggle

所以你可以像这样创建一个切换动画：

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

你可以在这里看到我的小提琴：http://jsfiddle.net/xhFz7/43/

Answer 4

解决方案是动画不是高度（默认的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/

Answer 5

试试这个。

$(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/

Answer 6

slideToggle 动画高度并将溢出设置为隐藏。作为标准行为，子元素（h1）位于其父元素的顶部。当父级收缩时，它们将保留在顶部，从而对页眉和页脚产生不同的效果。

通过在标题内容周围包含一个固定高度的额外块，并将其从标题的底部中定位，当此框缩小高度时，内容将会上升。

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

页眉和页脚的幻灯片动画的差异

6 个答案: