Question

目前，当社交栏被扩展时，我使用.show（“slow”），这会以一种似乎对角地扩展它的方式显示div。这不是我想要的，我希望div能够横向展示自己。换句话说，我希望div向左滑动以显示自己。有一个更好的方法吗？

我的jscript：

$(".socbar").hide().before("<div class='social_button'></div>");
$(document).on('click', '.social_button', function () {
    var $link = $(this);
    $link.next().show("slow");
    $link.remove();
    return false;
});
$(".arrow").click(function () {
    $(".socbar").hide().before("<div class='social_button'></div>");
    return false;
});

我的Html：

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Page</title>
        <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    </head>

    <body>
        <div class="container clearfix">
            <div class="navbar_container grid_5">
                <div id="navbar">
                    <div class="nav_container grid_2 omega">
                        <div class="socbar">
                            <ul class="soc">
                                <li><a href="#" id="Facebook" title="Facebook"></a</li>
                                <li><a href="#" id="Linkedin" title="Linkedin"></a</li>
                                <li><a href="#" id="Youtube" title="Youtube"></a></li>
                            </ul>
                            <span class="arrow" title="Collapse"></span>
                        </div>
                        <ul class="nav">
                            <li><a href="#" id="Portfolio"></a></li>
                            <li><a href="#" id="Services"></a></li>
                            <li><a href="#" id="About"></a></li>
                            <li><a href="#" id="Home"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="jscript/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="jscript/nav.js"></script>
    </body>

</html>

我的CSS：

/*******    Global Styles   **********************************************/
body {
    font-family:'Roboto', sans-serif;
    color: #ffffff;
    margin: 0;
    padding: 0;
    height: 100%
}
.navbar_container {
    height: 100px;
    position: fixed;
}
img, object {
    width: 100%;
}
/*******    Navbar Styles   *****************************/
 #navbar {
    background: -webkit-linear-gradient(#111111 5px, #222222 25px, #444444);
    background: -moz-linear-gradient(#111111 5px, #222222 25px, #444444);
    background: -o-linear-gradient(#111111 5px, #222222 25px, #444444);
    background: linear-gradient(#111111 5px, #222222 25px, #444444);
    height: 60px;
    box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, .8);
}
.nav_container {
    height: 165%;
    float: right;
}
/*******    Nav Styles   *************/
 .nav {
    list-style: none;
    float: right;
    height: 52%;
    margin: 7px 0;
    padding: 0;
}
.nav li {
    height: 100%;
    width: 55px;
    margin: 0 10px 0 0;
    float: right;
}
.nav a {
    background: url('bg_img/nav_sprite.png') no-repeat;
    height: 100%;
    width: 100%;
    display: block;
}
#Home {
    background-position: -317px 0;
}
#About {
    background-position: -384px 0;
}
#Services {
    background-position: -451px 0;
}
#Portfolio {
    background-position: -519px 0;
}
#Home:hover {
    background-position: -317px -57.5px;
    cursor: pointer;
    cursor: hand;
}
#About:hover {
    background-position: -384px -57px;
    cursor: pointer;
    cursor: hand;
}
#Services:hover {
    background-position: -451px -57px;
    cursor: pointer;
    cursor: hand;
}
#Portfolio:hover {
    background-position: -519px -57px;
    cursor: pointer;
    cursor: hand;
}
/*******    Social Styles    *************/
 .social_button {
    background-color: #666666;
    height: 60px;
    width: 15px;
    float: right;
    border-radius: 5px 0 0 5px;
    box-shadow: inset 2px -2px 2px 0px rgba(0, 0, 0, .8);
}
.social_button:hover {
    height: 62px;
    box-shadow: inset 3px -3px 3px 0px rgba(0, 0, 0, .8);
    cursor: pointer;
    cursor: hand;
}
.socbar {
    background-color: #666666;
    float: right;
    border-radius: 5px 0 0 5px;
    height: 62px;
    width: 203px;
    box-shadow: inset 3px -3px 3px 0px rgba(0, 0, 0, .8);
}
.arrow {
    background: url('bg_img/nav_sprite.png') no-repeat;
    background-position: -595px 6px;
    height: 60px;
    width: 45px;
    display: block;
}
.arrow:hover {
    opacity: .7;
    cursor: pointer;
    cursor: hand;
    transition-duration: 1s;
}
.soc {
    list-style: none;
    float: right;
    height: 73%;
    margin: 7px 0;
    padding: 0;
}
.soc li {
    height: 100%;
    width: 46px;
    margin: 0 7px 0 0;
    float: right;
}
.soc a {
    background: url('bg_img/nav_sprite.png') no-repeat;
    height: 100%;
    width: 100%;
    display: block;
}
.soc a:hover {
    opacity: .5;
    cursor: pointer;
    cursor: hand;
    transition-duration: .5s;
}
#Facebook {
    background-position: -793px 0;
}
#Linkedin {
    background-position: -727px 0;
}
#Youtube {
    background-position: -661px 0;
}

演示：

http://testpage.aws.af.cm/

Answer 1

您将需要jQuery UI来显示和隐藏更多选项（包括方向一）

.show("blind", {direction: "right" }, "slow");

以下是工作示例：http://jsfiddle.net/Dj8sq/

jquery点击动画不流畅

1 个答案: