Question

我在页面上有一个元素我有一个JQuery函数，可以在单击时重新调整它的大小。当它重新调整大小时，页面的其余部分会相对流畅地进行（虽然我还没有为较小的视口修复它，所以小提琴看起来有点不稳定，但你会看到我的意思），比例保持不变。也就是说，除了我有的标题元素，它是：

<header class="pageHeader">Welcome!</header>

当页面的其余部分重新调整大小时，标题会跳转到较小的宽度，然后跳到正确的宽度。

我认为这是因为我在右侧和左侧给出了-6％的负余量。这是header元素的CSS，以及动画的JQuery：

CSS：

.pageHeader
{
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    background: #fff;
    margin-bottom: 3.75%;
    padding: 1.25%;
    font-weight: 300;
    font-size: 2.25em;
    font-family: Century Gothic, sans-serif;
    color: #000000;
    text-align: center;
    margin-left: -6%;
    margin-right: -6%;
}

JS：

$(document).ready(function(){
    $("#menuButton").click(function(){
      if($('#sideContent').hasClass('hide')) {
        $('#sideContent').animate({width:'15%'},400).removeClass('hide');
        $('nav').animate({display:'inline-block', opacity:1},400).removeClass('hide');
        $('#pageSize').animate({width:'77%', marginLeft: '18%'},400).removeClass('big').addClass('small');
      } else { 
        $('#sideContent').animate({width:'5em'},400).addClass('hide');
        $('nav').animate({opacity:0},200).addClass('hide');
        $('#pageSize').animate({width: '87%', marginLeft: '8%'},400).removeClass('small').addClass('big');
        }
    });
});

我该如何解决这个问题？我应该重构HTML以便我不需要负边距，还是应该尝试通过JQuery修复它？

这是一个小伙伴：http://jsfiddle.net/buLW8/

我怎样才能流畅地调整我的标题？

0 个答案: