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

解决方案是动画不是高度（默认的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为高度设置动画并将溢出设置为隐藏。作为标准行为，子元素 (h1) 位于其父元素的顶部。当父级缩小时，它们会停留在顶部，从而对页眉和页脚产生不同的效果。

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

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

于 2012-10-15T12:13:01.823 回答