页眉和页脚幻灯片动画的区别答案

【问题标题】：Difference in slide animation of header and footer页眉和页脚幻灯片动画的区别
【发布时间】：2012-09-26 17:42:50
【问题描述】：

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

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

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

【问题讨论】：

这是因为背景默认“锚定”在左上角。当顶部向下移动时，背景随之移动。当底部关闭时，背景保持在左上角。您可以通过放置背景图像并将其背景位置设置为顶部或底部来看到这一点。

标签： jquery css jquery-mobile jquery-animate

【解决方案1】：

您可以为标题元素的top 属性设置动画，而不是使用方便的.slideToggle()，使其滑出屏幕而不是改变高度。

例如，您可以使用.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/

【讨论】：

【解决方案2】：

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

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

在这里看到http://jsfiddle.net/xhFz7/58/

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

哇哦！我不知道你可以用 jQuery toggle() 做到这一点。这个是我最喜欢的...

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：

【解决方案6】：

slideToggle 为 height 设置动画并将 overflow 设置为 hidden。作为标准行为，子元素 (h1) 位于其父元素的顶部。当父级缩小时，它们会停留在顶部，从而对页眉和页脚产生不同的效果。

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

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

【讨论】：