尝试打开/关闭 div，方向箭头在打开和关闭时发生变化，但在关闭和打开时保持与 div 的连接。
http://jsfiddle.net/siiimple/GqJj8/8/
理想情况下，我希望它在关闭（快速）时向左滑动，然后向右打开。关闭时，关闭的“-”将变为“+”。
感谢您的帮助:)
【问题讨论】：
Uncaught TypeError: Property '#<Object>' of object #<Object> is not a function。我建议咨询the docs 如何正确调用.hide()
偏离了 crowjonah 的解决方案，并提出了一些我认为更接近您的规范的方法。
在这里查看：
首先，对 div 进行了一些重组，使展开/收缩按钮与滑动 div 是对等的；以便它在过渡期间保持连接：
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
然后将 CSS 重构为：1. 让它更简单一点，2：围绕块、相对、浮动和绝对进行更改，以便将按钮“固定”到相对 div，就是这样：
#intro-wrap {
position: relative;
z-index: 1;
border-left: 25px solid rgba(0,0,0,.2);
width: 200px;
}
#contentWrap{
background: rgba(0,0,0,.8);
padding: 15px 40px 25px 30px;
}
#intro-wrap h1 {
font-family: "PT Sans Narrow";
font-size: 25px;
color: #fff;
font-weight: 700;
margin-bottom: 0px !important;
padding-bottom: 10px;
}
#intro-wrap p {
line-height: 19px;
color: #999;
}
.open-intro,
.close-intro {
position:absolute;
left:200px;
cursor: pointer;
width: 25px;
height: 25px;
z-index: 50;
padding-left:15px;
}
.open-intro {
display: none;
background: yellow
}
.close-intro {
background: red;
}
我在 js 中唯一改变的是我禁用了不透明动画，但你可以把它带回来——我只是不会用它来定位 #intro-wrap，你应该用它来定位 contentWrap：
$('.open-intro').click(function() {
$('#intro-wrap').animate({
//opacity: 1,
left: '0',
}, 500, function() {
// Animation complete.
});
$('.open-intro').hide();
$('.close-intro').show();
});
$('.close-intro').click(function() {
$('#intro-wrap').animate({
//opacity: 0.25,
left: '-225',
}, 400, function() {
// Animation complete.
});
$('.open-intro').show();
$('.close-intro').hide();
});
J
【讨论】：
我通常创建一个包含向上和向下箭头的精灵表，然后为每个具有不同背景位置的类。在切换时，只需将箭头分配给类，如果它是打开或关闭的。
而且更新的小提琴对我来说根本不起作用。
【讨论】：
【讨论】：
左右滑动的一个简单方法是使用jQuery UI！
只需在 jQuery 本身之后添加 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 并使用本示例中所示的函数（我分叉了 Harmeets）：http://jsfiddle.net/qEBnG/1/（编辑：更好：http://jsfiddle.net/qEBnG/2/）
然后用你的选择器和参数填写函数调用：
$('.open-button').click(function() {
$('#content').show("slide", { direction: "left" }, 500);
$('.open-button').hide();
$('.close-button').show();
});
$('.close-button').click(function() {
$('#content').hide("slide", { direction: "left" }, 100);
$('.open-button').show();
$('.close-button').hide();
});
如果需要，您可以稍微修改 CSS 以使 + 和 - 按钮相互替换。
正如 josh 所指出的，您不一定要加载整个 jQuery UI 库只是为了一个小的用途，在这种情况下，您可以使用 jQuery 的 animate 函数。这里是a fiddle，下面是一些代码（粘贴现有的点击功能）：
$('#content').animate({
opacity: 1,
left: '-900', //to close. use 0 to open
}, 500, function() {}); //500 is the speed. lower is quicker
【讨论】：