Javascript 我能'；我不明白为什么我的JQuery UI滑入菜单缺少几个像素_Javascript_Jquery_Html_Css_Jquery Ui

Javascript 我能'；我不明白为什么我的JQuery UI滑入菜单缺少几个像素

javascript jquery html css jquery-ui

Javascript 我能'；我不明白为什么我的JQuery UI滑入菜单缺少几个像素,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,如果单击“排序”链接，您会注意到幻灯片在运行时缺少了几个像素/边框。完成后，将显示像素/边框。如何让这些像素/边框在滑入时显示请参阅此JS小提琴： HTML Javascript 谢谢 #排序需要有高度：22px。我更新了你的小提琴在#排序需要有高度：22px。我在天哪，更新了你的小提琴，这是漫长的一天。谢谢我不知道我是怎么错过的。天哪，这是漫长的一天。谢谢我不知道我是怎么错过的。 <!DOCTYPE html> <body> <div id="SortConta

如果单击“排序”链接，您会注意到幻灯片在运行时缺少了几个像素/边框。完成后，将显示像素/边框。如何让这些像素/边框在滑入时显示

请参阅此JS小提琴：

HTML Javascript

谢谢

#排序

需要有

高度：22px。我更新了你的小提琴在
#排序
需要有高度：22px。我在天哪，更新了你的小提琴，这是漫长的一天。谢谢我不知道我是怎么错过的。天哪，这是漫长的一天。谢谢我不知道我是怎么错过的。
<!DOCTYPE html>
<body>
<div id="SortContainer">  
    <div id="Sorts">
        <div>Date</div>
        <div>Views</div>
        <div>Rating</div>
        <div>Title</div>
        <div>Random</div>
    </div>
    <div id="SortButton"><a id="SortLink" href="#">Sort</a></div>
</div>
</body>
</html>

#SortContainer {
    width: auto;
    height: 22px;
    margin: 40px 0px 0px 0px;
    overflow: hidden;
    float: right;
}

#SortButton {
    width: 55px;
    height: 20px;
    line-height: 20px;
    padding: 0px 0px 0px 4px;
    border-top: 1px solid #393939;
    border-right: 1px solid #5A5A5A;
    border-bottom: 1px solid #393939;
    border-left: 1px solid #393939;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    background-color: #333333;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    float: right;
}

#SortButton > a {
    text-decoration: none;
    color: #CCCCCC;
}


#Sorts {
    display: none;
    height: 20px;
    line-height: 20px;
    float: right;
}

#Sorts div {
    width: auto;
    height: 20px;
    line-height: 20px;
    border-top: 1px solid #393939;
    border-right: 1px solid #5A5A5A;
    border-bottom: 1px solid #393939;
    border-left: 1px solid #393939;
    padding: 0px 8px 0px 8px;
    text-align: center;
    float: left;
    background-color: #999999;
}

#Sorts div:last-child {
    border-right: 1px solid #393939;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#Sorts div a {
    text-decoration: none;
    color: #CCCCCC;
    font-weight: bold;
}

#Sorts div:hover {
    background-color: #555555;
}

//User clicked SORT link.
$(document).on("click", "#SortLink", function (e) {
    e.preventDefault();

    $('#Sorts').animate({ width: 'toggle' }, 5000);
});