Jquery 使用css过渡从中心向左和向右扩展宽度

我想要我的导航栏，它有一个固定的宽度，居中，在页面上滚动，从中心左右展开。目前它只是跳转到新的宽度

我设置了一个演示，您可以看到我正在尝试做什么：

（最好看看codepen上的演示。）

$（文档）.ready（函数（）{
//在初始页面加载时运行测试
checkSize（）；
//在调整窗口大小时运行测试
$（窗口）。调整大小（检查大小）；
$（“.navbar toggle”）。打开（“单击”，函数（）{
$（this.toggleClass（“导航栏切换修复”）；
});
});
var标头、徽标、YPO、窗口宽度、标头折叠、mbsp；
函数yScroll（）{
header=document.getElementById（'header'）；
logo=document.getElementById（'logo'）；
headerCollapse=document.getElementById（'headerCollapse'）；
mbsp=document.getElementById（'mbsp'）；
yPos=window.pageYOffset；
windowWidth=$（文档）.width（）；
如果（yPos>10）{
header.style.height=“69px”；
$（headerCollapse）.removeClass（'容器'）；
$（'#logo'）.addClass（'logoclapse'）；
$（'.navbar'）.addClass（'mb-navbarCollapse'）；
如果（窗口宽度>768）{
//mbsp.style.height=“0px”；
}
如果（窗宽<768）{
}
}否则{
header.style.height=“186px”；
$（headerCollapse）.addClass（'container'）；
$（“#logo”）.removeClass（'logoclapse'）；
$（'.navbar'）.removeClass（'mb-navbarCollapse'）；
如果（窗口宽度>768）{
//mbsp.style.height=“186px”；
logo.style.width=“137px”
logo.style.height=“69px”
logo.style.backgroundSize=“137px自动”
}
如果（窗口宽度>1024）{
logo.style.width=“160px”
logo.style.height=“119px”
logo.style.backgroundSize=“160px自动”
}
如果（窗宽<768）{
}
}
}
window.addEventListener（“滚动”，yScroll）；
//css规则的函数
函数checkSize（）{
if（$（“.mqJquery”）.css（“float”）=“无”）{
$（函数（）{
var$el，leftPos，newWidth；
var$mainNav=$（“.nav选项卡”）；
var activeItem=$（“.nav tabs.active”）[0]？$（$（“.nav tabs.active”）[0]）：null；
var itemLinks=$（“.nav tabs li a”）；
$mainNav.append（“
”；
变量$magicLine=$（“#幻线”）；
如果（活动项）{
$magicLine
.width（activeItem.width（））
.css（“左”，activeItem.position（）.left）
.data（“原始左侧”，activeItem.position（）.left）
.data（“原始宽度”，$magicLine.width（））；
}否则{
$magicLine.宽度（0）；
}
hover（函数（）{
$el=$（此项）；
leftPos=$el.parent（）.position（）.left；
newWidth=$el.parent（）.width（）；
如果（activeItem==null&&$magicLine.position（）.left==0）{
$magicLine.css（“左”，leftPos+newWidth/2）；
}
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“原始左”），
宽度：$magicLine.data（“原始宽度”）
});
});
});
}
}
//将SLIDEDOWN动画添加到下拉列表//
$（'.dropdown'）.on（'show.bs.dropdown'，函数（e）{
$（this）.find（'.dropdown menu'）.first（）.stop（true，true）.slideDown（500，“easeOutBounce”）；
});
//将SLIDEUP动画添加到下拉列表//
$（'.dropdown'）.on（'hide.bs.dropdown'，函数（e）{
$（this）.find（'.dropdown menu'）.first（）.stop（true，true）.slideUp（500，“easeOutBounce”）；
});
/*基本样式*/
@导入url(https://fonts.googleapis.com/css?family=Roboto:400，400斜体，500500斜体，700700斜体）；
html{
位置：相对位置；
最小高度：100%；
}
身体{
背景色：#cfcfcf；
字体系列：“Roboto”，Arial，Helvetica，无衬线；
}
.mqJquery{
浮动：左；
}
.clearfix{
明确：两者皆有；
}
/*标题*/
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}
/*色彩主题*/
.mb背景红{
背景色：#fd100a；
}
.mb字体红色{
颜色：#fd100a；
}
.mb bg darkgrey{
背景色：#3e3e；
}
.mb红色网格图案{
背景图片：url（'img/red grid pattern.png'）；
背景重复：重复；
}
.mb暗灰色网格图案{
背景图片：url（'img/darkgrey grid pattern.png'）；
背景重复：重复；
}
/*标题样式*/
标题{
背景图片：url（'img/header pattern.png'）；
边框顶部：4px实心#fd100a；
宽度：100%；
高度：100px；
过渡：高度0.2s线性0s，顶部0.2s线性0s；
-webkit过渡：高度0.2s线性0s，顶部0.2s线性0s；
-webkit背景剪辑：填充框；/*用于Safari*/
背景剪辑：填充框；/*用于IE9+、Firefox 4+、Opera、Chrome*/
}
/*导航栏响应样式*/
navbar先生{
边缘底部：20px；
}
.导航{
边缘底部：15px；
}
.导航选项卡>li>a{
边界半径：0；
颜色：#fff；
字号：9pt；
字号：500；
-webkit过渡：背景色150ms线性；
-moz过渡：背景色150ms线性；
-o过渡：背景色150ms线性；
-ms过渡：背景色150ms线性；
过渡：背景色150ms线性；
}
.navbar.open.dropdown menu>li>a:focus、.dropdown menu>li>a:hover、，
.nav.open>a、.nav.open>a:focus、.nav.open>a:hover，
.nav>li>a:聚焦.nav>li>a:悬停{
背景色：#a41d1d；
文字装饰：无；
}
.nav选项卡>li>a:悬停{
边框颜色：#eee#eee#ddd；
}
.nav选项卡>li{
浮动：无；
}
.navbar默认值，
.navbar默认值.navbar折叠.navbar默认值.navbar窗体，
.导航标签{
边框颜色：透明；
}
.nav.open>a、.nav.open>a:focus、.nav.open>a:hover，
.navbar默认值.navbar切换{
边框颜色：#a41d1d；
}
.navbar默认值.navbar切换.图标栏{
背景色：#a41d1d；
}
.导航栏.打开.下拉菜单{
背景色：透明；
边界：0无；
盒影：无；
浮动：无；
边际上限：0；
波西蒂
#headerCollapse {
  transition: width 0.5s ease-in-out;
  position:relative;
}
#headerCollapse:not(.container){
  width:100%;
  height: 69px;
}
#headerCollapse.container{
  height: 186px;
}

.navbar {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
}