尝试打开/关闭 div,方向箭头在打开和关闭时发生变化,但在关闭和打开时保持与 div 的连接。
http://jsfiddle.net/siiimple/GqJj8/8/
理想情况下,我希望它在关闭(快速)时向左滑动,然后向右打开。关闭时,关闭的“-”将变为“+”。
谢谢你的帮助 :)
尝试打开/关闭 div,方向箭头在打开和关闭时发生变化,但在关闭和打开时保持与 div 的连接。
http://jsfiddle.net/siiimple/GqJj8/8/
理想情况下,我希望它在关闭(快速)时向左滑动,然后向右打开。关闭时,关闭的“-”将变为“+”。
谢谢你的帮助 :)
偏离了 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();
});
Ĵ
我通常创建一个包含向上和向下箭头的精灵表,然后为每个具有不同背景位置的类。在切换时,只需将箭头分配给类,如果它是打开或关闭的。
此外,更新的小提琴对我来说根本不起作用。
左右滑动的一个简单方法是使用jQuery UI!只需<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
在 jQuery 本身之后添加并使用本示例中所示的函数(我分叉了 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 函数。这是一个小提琴,这里有一些代码(坚持现有的点击功能):
$('#content').animate({
opacity: 1,
left: '-900', //to close. use 0 to open
}, 500, function() {}); //500 is the speed. lower is quicker