1

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

请参考这个 JS Fiddle：http: //jsfiddle.net/R3FkZ/

HTML

<!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>

CSS

#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;
}

Javascript

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

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

谢谢！

4

1 回答 1

1

#Sorts需要有height:22px;。我在http://jsfiddle.net/R3FkZ/1/更新了你的小提琴

于 2013-08-08T22:09:45.347 回答